@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
:root  {
    color-scheme: dark;
    --ink: #090909;
    --ink-2: #151510;
    --ink-3: #242216;
    --yellow: #f4ce14;
    --yellow-soft: #27230f;
    --canvas: #0b0b09;
    --surface: #151510;
    --line: #3b341a;
    --muted: #c0b46f;
    --text: #ffe889;
    --green: #f4ce14;
    --green-soft: #24220f;
    --orange: #f4ce14;
    --orange-soft: #2e260b;
    --red: #f4ce14;
    --red-soft: #29210c;
    --blue: #f4ce14;
    --blue-soft: #25220f;
    --shadow: 0 12px 34px rgba(0,0,0,.25);
    --radius: 14px;
    --font: 'Cairo', 'Tahoma', system-ui, sans-serif;
    --latin: 'IBM Plex Sans', 'Tahoma', Arial, sans-serif;
}

* {
    box-sizing:border-box}
html {
    min-height:100%;
    scroll-behavior:smooth}
body {
    margin:0;
    background:var(--canvas);
    color:var(--text);
    font-family:var(--font);
    font-size:14px;
    line-height:1.7}
button,input,textarea,select {
    font:inherit}
button {
    cursor:pointer}
a {
    color:inherit;
    text-decoration:none}
.app-body {
    min-height:100vh}
.app-frame {
    display:flex;
    min-height:100vh}
.sidebar {
    background:var(--ink);
    color:#ffe889;
    width:288px;
    flex:0 0 288px;
    display:flex;
    flex-direction:column;
    padding:24px 16px 16px;
    position:fixed;
    inset:0 0 0 auto;
    z-index:40;
    transition:transform .18s ease}
.workspace {
    margin-right:288px;
    min-width:0;
    flex:1}
.brand {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 8px 25px}
.brand-link {
    display:flex;
    align-items:center;
    gap:11px}
.brand-mark {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex:0 0 auto}
.brand-mark img {
    display:block;
    width:42px;
    height:42px}
.brand-copy {
    display:flex;
    flex-direction:column;
    line-height:1.25}
.brand-copy strong {
    font-size:18px;
    letter-spacing:-.3px}
.brand-copy small {
    color:#ead373;
    font-size:14px;
    margin-top:3px}
.sidebar .brand-copy small {
    color:#c0b46f}
.icon-button {
    width:38px;
    height:38px;
    border:0;
    background:transparent;
    color:inherit;
    border-radius:10px;
    font-size:22px;
    display:grid;
    place-items:center;
    transition:background .15s,color .15s}
.icon-button:hover {
    background:rgba(244,206,20,.1)}
.sidebar-close {
    display:none}
.sidebar-context {
    background:rgba(244,206,20,.06);
    border:1px solid rgba(244,206,20,.06);
    border-radius:9px;
    padding:7px 10px;
    margin:0 4px 22px;
    color:#ead373;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:7px}
.sidebar-context b {
    margin-right:auto;
    color:#f4ce14;
    font-weight:600}
.status-dot,.live-dot {
    width:7px;
    height:7px;
    background:#f4ce14;
    border-radius:99px;
    display:inline-block;
    box-shadow:0 0 0 3px rgba(244,206,20,.14)}
.main-nav {
    display:flex;
    flex-direction:column;
    gap:20px;
    overflow:auto;
    padding:0 2px}
.nav-group {
    display:flex;
    flex-direction:column;
    gap:3px}
.nav-group-title {
    color:#b6a651;
    font-size:14px;
    font-weight:700;
    letter-spacing:.5px;
    padding:0 11px 5px}
.nav-item {
    display:flex;
    align-items:center;
    gap:11px;
    color:#ead373;
    border-radius:9px;
    padding:9px 11px;
    min-height:40px;
    transition:background .14s,color .14s}
.nav-item:hover {
    color:#ffe889;
    background:rgba(244,206,20,.07)}
.nav-item.active {
    background:var(--yellow);
    color:var(--ink);
    font-weight:700}
.nav-icon {
    width:19px;
    height:19px;
    display:grid;
    place-items:center;
    font-size:17px;
    line-height:1;
    font-family:Arial,sans-serif}
.nav-label {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis}
.nav-count {
    font-family:var(--latin);
    font-size:14px;
    margin-right:auto;
    background:rgba(244,206,20,.12);
    padding:1px 6px;
    border-radius:8px}
.nav-item.active .nav-count {
    background:rgba(0,0,0,.13)}
.sidebar-footer {
    margin-top:auto;
    padding:18px 4px 0}
.sidebar-note {
    border-top:1px solid rgba(244,206,20,.08);
    padding:14px 6px;
    color:#b6a651;
    font-size:14px;
    display:flex;
    gap:7px;
    align-items:center}
.mini-icon {
    color:var(--yellow);
    font-size:15px}
.sidebar-user {
    border-top:1px solid rgba(244,206,20,.08);
    padding:14px 5px 0;
    min-height:46px}
.sidebar-user .user-mini {
    display:flex;
    align-items:center;
    gap:8px}
.avatar {
    width:34px;
    height:34px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:var(--yellow);
    color:var(--ink);
    font-weight:800}
.user-mini .avatar {
    width:28px;
    height:28px;
    font-size:14px;
    border-radius:8px}
.user-mini b {
    display:block;
    font-size:14px}
.user-mini small {
    display:block;
    color:#c0b46f;
    font-size:14px}
.sidebar-scrim {
    display:none}
.topbar {
    height:76px;
    background:rgba(14,14,10,.96);
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 34px;
    position:sticky;
    top:0;
    z-index:20;
    backdrop-filter:blur(12px)}
.topbar-start,.topbar-actions {
    display:flex;
    align-items:center;
    gap:14px}
.menu-toggle {
    display:none;
    color:var(--ink)}
.breadcrumbs {
    display:flex;
    gap:10px;
    align-items:center;
    color:var(--muted);
    font-size:14px}
.breadcrumbs strong {
    color:var(--text);
    font-weight:700}
.breadcrumbs i {
    font-style:normal;
    color:#9d8941}
.global-search {
    height:39px;
    width:280px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--canvas);
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 11px;
    color:#c0b46f}
.global-search input {
    border:0;
    outline:0;
    min-width:0;
    width:100%;
    background:transparent;
    color:var(--text);
    font-size:14px}
.global-search input::placeholder {
    color:#b6a651}
.global-search kbd {
    font-family:var(--latin);
    font-size:14px;
    color:#c0b46f;
    background:var(--surface);
    border:1px solid var(--line);
    padding:1px 4px;
    border-radius:4px;
    white-space:nowrap}
.topbar-actions .icon-button {
    color:#ead373;
    position:relative}
.notification-button {
    font-size:20px}
.bell-icon {
    transform:rotate(180deg);
    display:block;
    font-family:Arial}
.notification-button em {
    position:absolute;
    top:3px;
    right:3px;
    background:var(--yellow);
    color:var(--ink);
    font:700 14px var(--latin);
    min-width:15px;
    height:15px;
    border-radius:99px;
    display:grid;
    place-items:center;
    font-style:normal}
.account-wrap,.notification-wrap {
    position:relative}
.account-button {
    border:0;
    background:transparent;
    display:flex;
    align-items:center;
    gap:8px;
    text-align:right;
    padding:3px;
    border-radius:10px}
.account-button:hover {
    background:var(--canvas)}
.account-copy {
    display:flex;
    flex-direction:column;
    line-height:1.35;
    min-width:84px}
.account-copy b {
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis}
.account-copy small {
    font-size:14px;
    color:var(--muted)}
.chevron {
    color:#c0b46f;
    font-size:14px}
.popover {
    position:absolute;
    top:calc(100% + 11px);
    left:0;
    background:var(--surface);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    border-radius:12px;
    z-index:60;
    min-width:270px;
    overflow:hidden}
.account-popover {
    min-width:170px;
    padding:6px}
.account-popover a,.account-popover button {
    display:block;
    width:100%;
    border:0;
    background:transparent;
    text-align:right;
    padding:8px 10px;
    border-radius:7px;
    font-size:14px;
    color:var(--text)}
.account-popover a:hover,.account-popover button:hover {
    background:var(--canvas)}
.notification-popover {
    left:-8px}
.popover-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid var(--line);
    padding:11px 13px}
.popover-head strong {
    font-size:14px}
.text-button {
    border:0;
    background:none;
    color:var(--blue);
    font-size:14px;
    padding:0}
.notification-list {
    max-height:330px;
    overflow:auto}
.notification-item {
    padding:10px 13px;
    border-bottom:1px solid #302b17;
    display:block;
    font-size:14px}
.notification-item.unread {
    background:#24200c}
.notification-item p {
    margin:0 0 3px;
    line-height:1.5}
.notification-item small {
    color:var(--muted);
    font-size:14px}
.content {
    padding:31px 34px 50px;
    max-width:1600px;
    margin:auto}
.page-view {
    animation:page-in .16s ease}
.page-view[hidden] {
    display:none!important}
@keyframes page-in {
    from {
    opacity:.5;
    transform:translateY(3px)}
to {
    opacity:1;
    transform:none}
}
.page-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:27px}
.page-heading h1 {
    font-size:26px;
    line-height:1.35;
    margin:4px 0 4px;
    letter-spacing:-.7px}
.page-heading p {
    margin:0;
    color:var(--muted);
    font-size:14px}
.eyebrow {
    color:#c0b46f;
    font-size:14px;
    font-weight:700;
    letter-spacing:.2px}
.eyebrow .live-dot {
    margin-right:5px;
    width:5px;
    height:5px}
.light {
    color:#c7b765}
.heading-actions {
    display:flex;
    gap:9px;
    align-items:center}
.demo-badge {
    background:var(--yellow-soft);
    border:1px solid #796017;
    color:#f4ce14;
    font-size:14px;
    border-radius:99px;
    padding:5px 10px;
    white-space:nowrap}
.demo-badge.dark {
    background:rgba(244,206,20,.12);
    border-color:rgba(244,206,20,.25);
    color:var(--yellow)}
.button {
    border:1px solid transparent;
    border-radius:8px;
    min-height:39px;
    padding:7px 15px;
    font-size:14px;
    font-weight:700;
    transition:transform .15s,background .15s,border .15s}
.button:active {
    transform:translateY(1px)}
.button-primary {
    background:var(--yellow);
    color:var(--ink)}
.button-primary:hover {
    background:#e4bd08}
.button-secondary {
    background:var(--surface);
    border-color:var(--line);
    color:#ead373}
.button-secondary:hover {
    border-color:#73601b;
    background:#201e12}
.button-danger {
    background:var(--red-soft);
    color:var(--red);
    border-color:#796017}
.button-wide {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px}
.kpi-strip {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:16px}
.kpi-card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px 18px;
    position:relative;
    overflow:hidden}
.kpi-card:after {
    content:'';
    position:absolute;
    bottom:0;
    right:0;
    width:55px;
    height:3px;
    background:var(--yellow)}
.kpi-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--muted);
    font-size:14px}
.kpi-icon {
    width:28px;
    height:28px;
    border-radius:8px;
    background:var(--canvas);
    display:grid;
    place-items:center;
    color:var(--ink);
    font-size:15px}
.kpi-value {
    font:600 25px var(--latin);
    letter-spacing:-1px;
    margin:6px 0 1px}
.kpi-meta {
    font-size:14px;
    color:var(--muted)}
.dashboard-grid {
    display:grid;
    grid-template-columns:minmax(0,1.42fr) minmax(290px,.78fr);
    gap:16px}
.panel {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    min-width:0}
.pipeline-panel,.projects-panel {
    grid-column:1}
.activity-panel,.attendance-panel {
    grid-column:2}
.projects-panel {
    grid-row:2}
.attendance-panel {
    grid-row:2}
.panel-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:18px 19px 12px}
.panel-head h2 {
    margin:3px 0 0;
    font-size:15px;
    letter-spacing:-.2px}
.panel-link {
    color:#d5c26e;
    font-size:14px;
    white-space:nowrap;
    padding-top:3px}
.panel-link:hover {
    color:var(--ink)}
.panel-link span {
    color:var(--yellow);
    font-size:16px}
.panel-date {
    color:var(--muted);
    font-size:14px}
.pipeline {
    display:flex;
    gap:5px;
    padding:15px 19px 21px;
    align-items:flex-end;
    min-height:225px;
    border-top:1px solid #302b17}
.stage {
    flex:1;
    min-width:45px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px}
.stage-bar-wrap {
    height:125px;
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center}
.stage-bar {
    width:calc(100% - 13px);
    max-width:56px;
    border-radius:6px 6px 2px 2px;
    background:#3e361b;
    min-height:8px;
    position:relative;
    transition:height .3s ease}
.stage-bar.active {
    background:var(--yellow)}
.stage-bar:after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(90deg,rgba(244,206,20,.16),transparent)}
.stage-count {
    font:600 14px var(--latin)}
.stage-label {
    font-size:14px;
    color:var(--muted);
    text-align:center;
    line-height:1.25}
.activity-list {
    border-top:1px solid #302b17;
    padding:5px 19px 11px;
    min-height:225px}
.activity-row {
    display:flex;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid #302b17}
.activity-row:last-child {
    border:0}
.activity-mark {
    width:25px;
    height:25px;
    flex:0 0 auto;
    border-radius:8px;
    background:var(--yellow-soft);
    color:#f4ce14;
    display:grid;
    place-items:center;
    font-size:14px}
.activity-row p {
    margin:0;
    font-size:14px;
    line-height:1.45}
.activity-row small {
    color:var(--muted);
    font-size:14px}
.table-wrap {
    overflow-x:auto;
    border-top:1px solid #302b17}
.table-wrap table {
    width:100%;
    border-collapse:collapse;
    min-width:630px}
.table-wrap th {
    text-align:right;
    color:#c0b46f;
    font-weight:600;
    font-size:14px;
    padding:10px 19px 8px;
    white-space:nowrap}
.table-wrap td {
    padding:12px 19px;
    border-top:1px solid #302b17;
    font-size:14px;
    white-space:nowrap}
.table-wrap tbody tr:hover {
    background:#201e12}
.record-link {
    font-weight:700;
    color:var(--text)}
.record-link:hover {
    text-decoration:underline;
    text-decoration-color:var(--yellow)}
.status-chip {
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:var(--canvas);
    border-radius:99px;
    padding:3px 8px;
    font-size:14px;
    white-space:nowrap}
.status-chip:before {
    content:'';
    width:5px;
    height:5px;
    border-radius:50%;
    background:#b6a651}
.status-chip[data-tone=success] {
    background:var(--green-soft);
    color:var(--green)}
.status-chip[data-tone=success]:before {
    background:var(--green)}
.status-chip[data-tone=warning] {
    background:var(--orange-soft);
    color:var(--orange)}
.status-chip[data-tone=warning]:before {
    background:var(--orange)}
.status-chip[data-tone=danger] {
    background:var(--red-soft);
    color:var(--red)}
.status-chip[data-tone=danger]:before {
    background:var(--red)}
.status-chip[data-tone=info] {
    background:var(--blue-soft);
    color:var(--blue)}
.status-chip[data-tone=info]:before {
    background:var(--blue)}
.attendance-summary {
    margin:2px 19px 11px;
    background:var(--ink);
    color:#ffe889;
    border-radius:9px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between}
.attendance-summary b {
    font:600 20px var(--latin);
    color:var(--yellow)}
.attendance-summary span {
    font-size:14px;
    color:#d0be6d}
.attendance-list {
    border-top:1px solid #302b17;
    padding:2px 19px 8px}
.attendance-row {
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px 0;
    border-bottom:1px solid #302b17}
.attendance-row:last-child {
    border:0}
.attendance-row .avatar {
    width:25px;
    height:25px;
    font-size:14px;
    border-radius:7px}
.attendance-row strong {
    font-size:14px;
    display:block}
.attendance-row small {
    font:14px var(--latin);
    color:var(--muted)}
.attendance-row .status-chip {
    margin-right:auto}
.loading-block {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px}
.loading-block span {
    height:90px;
    border-radius:var(--radius);
    background:linear-gradient(100deg,#1b1a10 30%,#272414 50%,#1b1a10 70%);
    background-size:200% 100%;
    animation:shimmer 1.2s infinite}
.loading-block span:nth-child(n+2) {
    height:90px}
.loading-block span:nth-child(1) {
    grid-column:span 1}
.loading-block:after {
    content:'';
    grid-column:1/-1;
    height:300px;
    border-radius:var(--radius);
    background:linear-gradient(100deg,#1b1a10 30%,#272414 50%,#1b1a10 70%);
    background-size:200% 100%;
    animation:shimmer 1.2s infinite}
@keyframes shimmer {
    to {
    background-position:-200% 0}
}
.inline-error,.global-error,.server-error {
    border:1px solid #796017;
    background:var(--red-soft);
    color:#ffe889;
    border-radius:9px;
    padding:11px 13px;
    font-size:14px;
    margin:0 0 16px}
.global-error {
    margin:0 0 20px}
.server-success {
    border:1px solid #796017;
    background:var(--green-soft);
    color:#ffe889;
    border-radius:9px;
    padding:11px 13px;
    font-size:14px;
    margin:0 0 16px}
.empty-state {
    color:var(--muted);
    text-align:center;
    padding:35px 15px;
    font-size:14px}
.empty-state.compact {
    padding:25px 15px}
.error-state {
    color:var(--red);
    text-align:center;
    padding:30px;
    font-size:14px}
.module-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:15px 17px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius) var(--radius) 0 0}
.toolbar-start,.toolbar-end {
    display:flex;
    align-items:center;
    gap:8px}
.field-control,.filter-control {
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface);
    color:var(--text);
    height:38px;
    padding:0 11px;
    outline:none;
    font-size:14px}
.filter-control:focus,.field-control:focus {
    border-color:#f4ce14;
    box-shadow:0 0 0 3px rgba(244,206,20,.14)}
.module-search {
    width:260px;
    background:var(--canvas)}
.module-table-panel {
    border-top:0;
    border-radius:0 0 var(--radius) var(--radius);
    overflow:hidden}
.module-table-panel .table-wrap {
    border-top:0}
.pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 17px;
    border-top:1px solid var(--line);
    font-size:14px;
    color:var(--muted)}
.pagination-buttons {
    display:flex;
    gap:5px}
.page-button {
    min-width:29px;
    height:29px;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:7px;
    font-size:14px;
    color:var(--text)}
.page-button.active {
    background:var(--ink);
    color:#ffe889;
    border-color:var(--ink)}
.module-heading-meta {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:var(--muted)}
.record-number {
    font:14px var(--latin);
    color:var(--muted)}
.detail-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:16px}
.detail-main,.detail-side {
    min-width:0}
.detail-title-line {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    margin-bottom:20px}
.detail-title-line h1 {
    margin:2px 0 3px;
    font-size:25px;
    letter-spacing:-.6px}
.back-link {
    font-size:14px;
    color:var(--muted);
    display:inline-flex;
    gap:6px;
    align-items:center;
    margin-bottom:12px}
.back-link:hover {
    color:var(--text)}
.detail-actions {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    justify-content:flex-start}
.detail-card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    margin-bottom:16px}
.detail-card-head {
    padding:15px 18px;
    border-bottom:1px solid #302b17;
    display:flex;
    justify-content:space-between;
    align-items:center}
.detail-card-head h2 {
    font-size:14px;
    margin:0}
.detail-card-body {
    padding:18px}
.detail-fields {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px 22px}
.detail-field label {
    display:block;
    color:var(--muted);
    font-size:14px;
    margin-bottom:3px}
.detail-field div {
    font-size:14px;
    word-break:break-word}
.detail-field.full {
    grid-column:1/-1}
.related-tabs {
    display:flex;
    gap:5px;
    overflow:auto;
    border-bottom:1px solid var(--line);
    padding:0 18px}
.related-tab {
    border:0;
    border-bottom:2px solid transparent;
    background:none;
    padding:11px 2px;
    margin-left:17px;
    color:var(--muted);
    font-size:14px;
    white-space:nowrap}
.related-tab.active {
    color:var(--text);
    border-bottom-color:var(--yellow);
    font-weight:700}
.related-content {
    padding:14px 18px}
.attachment-row {
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 0;
    border-bottom:1px solid #302b17;
    font-size:14px}
.attachment-row:last-child {
    border:0}
.attachment-icon {
    width:28px;
    height:28px;
    border-radius:7px;
    background:var(--canvas);
    display:grid;
    place-items:center}
.attachment-row small {
    color:var(--muted);
    display:block}
.attachment-row a {
    margin-right:auto;
    color:var(--blue);
    font-size:14px}
.upload-form {
    border-top:1px dashed var(--line);
    margin-top:8px;
    padding-top:13px;
    display:flex;
    flex-wrap:wrap;
    gap:7px}
.upload-form input[type=file] {
    font-size:14px;
    max-width:160px}
.upload-form select {
    max-width:130px}
.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px}
.form-field {
    display:flex;
    flex-direction:column;
    gap:5px}
.form-field.full {
    grid-column:1/-1}
.form-field>label {
    font-size:14px;
    font-weight:700;
    color:#ead373}
.form-field>label .required {
    color:var(--red)}
.form-field .hint {
    font-size:14px;
    color:var(--muted);
    font-weight:400}
.form-field input,.form-field select,.form-field textarea {
    width:100%;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--surface);
    color:var(--text);
    padding:8px 10px;
    outline:none;
    font-size:14px;
    min-height:38px}
.form-field textarea {
    resize:vertical;
    min-height:90px}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus {
    border-color:#f4ce14;
    box-shadow:0 0 0 3px rgba(244,206,20,.14)}
.form-field input[readonly],.form-field select:disabled,.form-field textarea[readonly] {
    background:#1b1b12;
    color:#ab9e58;
    cursor:not-allowed}
.json-input {
    font-family:var(--latin);
    direction:ltr;
    text-align:left}
.drawer-scrim {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.38);
    z-index:70}
.form-drawer {
    position:fixed;
    z-index:80;
    top:0;
    bottom:0;
    left:0;
    width:min(530px,100vw);
    background:var(--surface);
    box-shadow:10px 0 34px rgba(0,0,0,.15);
    transform:translateX(-100%);
    transition:transform .18s ease;
    display:flex;
    flex-direction:column}
.form-drawer.open {
    transform:translateX(0)}
.drawer-head {
    padding:20px 23px 16px;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:flex-start}
.drawer-head h2 {
    font-size:20px;
    margin:3px 0 0}
.drawer-head .icon-button {
    color:var(--muted)}
.drawer-body {
    padding:20px 23px;
    overflow:auto;
    flex:1}
.drawer-foot {
    padding:13px 23px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:flex-start;
    gap:8px}
.toast-region {
    position:fixed;
    bottom:19px;
    left:19px;
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:8px}
.toast {
    background:var(--ink);
    color:#ffe889;
    border-radius:9px;
    padding:10px 14px;
    box-shadow:var(--shadow);
    font-size:14px;
    min-width:220px;
    animation:toast-in .18s ease}
.toast.success {
    border-right:3px solid var(--green)}
.toast.error {
    border-right:3px solid var(--red)}
@keyframes toast-in {
    from {
    opacity:0;
    transform:translateY(5px)}
to {
    opacity:1;
    transform:none}
}
.reports-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px}
.report-card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:17px;
    display:flex;
    flex-direction:column;
    min-height:150px}
.report-card h3 {
    font-size:14px;
    margin:9px 0 4px}
.report-card p {
    font-size:14px;
    color:var(--muted);
    margin:0 0 15px}
.report-card .report-actions {
    margin-top:auto;
    display:flex;
    gap:7px}
.settings-layout {
    display:grid;
    grid-template-columns:210px minmax(0,1fr);
    gap:16px}
.settings-nav,.settings-card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius)}
.settings-nav {
    padding:8px;
    height:max-content}
.settings-nav button {
    width:100%;
    border:0;
    background:transparent;
    text-align:right;
    padding:10px;
    border-radius:8px;
    font-size:14px;
    color:var(--muted)}
.settings-nav button.active,.settings-nav button:hover {
    background:var(--yellow-soft);
    color:var(--text);
    font-weight:700}
.settings-card {
    padding:21px}
.settings-card h2 {
    font-size:15px;
    margin:0 0 3px}
.settings-card>p {
    font-size:14px;
    color:var(--muted);
    margin:0 0 20px}
.settings-actions {
    margin-top:22px;
    display:flex;
    gap:8px}
.setup-code {
    background:var(--ink);
    color:var(--yellow);
    padding:14px;
    border-radius:8px;
    font:14px var(--latin);
    direction:ltr;
    text-align:left;
    overflow:auto}
.login-body {
    min-height:100vh;
    background:var(--ink);
    display:grid;
    place-items:center}
.login-shell {
    min-height:680px;
    width:min(1050px,100%);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.83fr);
    background:var(--surface);
    box-shadow:0 25px 70px rgba(0,0,0,.25);
    overflow:hidden}
.login-panel {
    padding:49px clamp(28px,7vw,85px);
    display:flex;
    flex-direction:column}
.login-brand {
    align-self:flex-start;
    color:var(--ink);
    margin-bottom:80px}
.login-intro h1 {
    font-size:28px;
    letter-spacing:-.8px;
    margin:5px 0}
.login-intro p {
    font-size:14px;
    color:var(--muted);
    margin:0 0 25px}
.login-form {
    display:flex;
    flex-direction:column;
    gap:15px}
.login-form>label {
    display:flex;
    flex-direction:column;
    gap:5px;
    font-size:14px;
    font-weight:700}
.login-form input {
    border:1px solid var(--line);
    border-radius:8px;
    padding:9px 11px;
    min-height:42px;
    outline:none;
    font-size:14px;
    background:var(--surface)}
.login-form input:focus {
    border-color:#f4ce14;
    box-shadow:0 0 0 3px rgba(244,206,20,.14)}
.password-field {
    position:relative}
.password-field input {
    width:100%;
    padding-left:60px}
.password-toggle {
    border:0;
    background:none;
    color:var(--muted);
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px}
.otp-field .optional {
    font-size:14px;
    color:var(--muted);
    font-weight:400;
    margin-right:4px}
.login-options {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    color:var(--blue);
    margin:0 0 4px}
.check-label {
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--muted)}
.check-label input {
    min-height:0;
    width:14px;
    height:14px;
    accent-color:var(--yellow)}
.login-footnote {
    color:#c0b46f;
    font-size:14px;
    margin-top:auto;
    padding-top:30px}
.login-aside {
    padding:47px 50px;
    background:var(--ink);
    color:#ffe889;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden}
.login-aside:after {
    content:'';
    position:absolute;
    left:-100px;
    bottom:-150px;
    width:480px;
    height:480px;
    border:1px solid rgba(244,206,20,.22);
    transform:rotate(45deg);
    border-radius:40px}
.login-aside-top {
    display:flex;
    align-items:center;
    gap:12px}
.aside-line {
    height:1px;
    background:rgba(244,206,20,.2);
    flex:1}
.login-aside h2 {
    font-size:36px;
    line-height:1.35;
    letter-spacing:-1.4px;
    margin:15px 0}
.login-aside h2 strong {
    color:var(--yellow)}
.login-aside p {
    color:#d0be6d;
    font-size:14px;
    max-width:290px}
.login-quote {
    position:relative;
    z-index:1;
    border-top:1px solid rgba(244,206,20,.13);
    padding-top:15px;
    display:flex;
    gap:8px}
.login-quote span {
    color:var(--yellow);
    font:35px Georgia;
    line-height:1}
.login-quote p {
    font-size:14px;
    color:#ead373;
    margin:0}
.skeleton-line {
    height:10px;
    width:75%;
    background:rgba(244,206,20,.09);
    display:block;
    border-radius:6px;
    margin:5px 10px}
.skeleton-line.short {
    width:45%}

@media(max-width:1100px) {
    .content {
    padding:27px 23px}
.topbar {
    padding:0 23px}
.kpi-strip {
    grid-template-columns:repeat(2,1fr)}
.dashboard-grid {
    grid-template-columns:minmax(0,1fr)}
.pipeline-panel,.projects-panel,.activity-panel,.attendance-panel {
    grid-column:1;
    grid-row:auto}
.reports-grid {
    grid-template-columns:repeat(2,1fr)}
}

@media(max-width:800px) {
    .sidebar {
    transform:translateX(100%);
    box-shadow:-12px 0 40px rgba(0,0,0,.18)}
.sidebar.open {
    transform:translateX(0)}
.sidebar-close {
    display:grid}
.sidebar-scrim {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    z-index:30}
.sidebar-scrim.open {
    display:block}
.workspace {
    margin-right:0}
.menu-toggle {
    display:grid}
.topbar {
    height:66px;
    padding:0 15px}
.global-search {
    width:190px}
.global-search kbd {
    display:none}
.account-copy {
    display:none}
.content {
    padding:23px 15px 35px}
.page-heading {
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:20px}
.heading-actions {
    width:100%;
    justify-content:space-between}
.detail-layout {
    grid-template-columns:1fr}
.settings-layout {
    grid-template-columns:1fr}
.settings-nav {
    display:flex;
    overflow:auto}
.settings-nav button {
    white-space:nowrap;
    width:auto}
.form-drawer {
    width:min(100vw,550px)}
.login-shell {
    min-height:100vh;
    grid-template-columns:1fr}
.login-aside {
    display:none}
.login-panel {
    padding:35px 25px}
.login-brand {
    margin-bottom:65px}
}

@media(max-width:520px) {
    .topbar-start {
    gap:7px}
.breadcrumbs {
    font-size:14px}
.global-search {
    width:38px;
    padding:0;
    justify-content:center;
    border:0;
    background:transparent}
.global-search input {
    position:absolute;
    width:1px;
    opacity:0}
.global-search span {
    font-size:21px}
.topbar-actions {
    gap:3px}
.kpi-strip {
    grid-template-columns:1fr 1fr;
    gap:8px}
.kpi-card {
    padding:12px 13px}
.kpi-value {
    font-size:21px}
.page-heading h1 {
    font-size:22px}
.panel-head {
    padding:15px 14px}
.panel-link {
    font-size:14px}
.pipeline {
    padding:13px 10px 17px}
.stage-bar {
    width:calc(100% - 7px)}
.stage-label {
    font-size:14px}
.stage-count {
    font-size:14px}
.table-wrap th,.table-wrap td {
    padding-left:13px;
    padding-right:13px}
.module-toolbar {
    align-items:stretch;
    flex-direction:column}
.toolbar-start,.toolbar-end {
    width:100%}
.module-search {
    width:100%}
.toolbar-end .button {
    flex:1}
.form-grid,.detail-fields {
    grid-template-columns:1fr}
.form-field.full,.detail-field.full {
    grid-column:auto}
.reports-grid {
    grid-template-columns:1fr}
.toast-region {
    left:10px;
    right:10px}
.toast {
    min-width:0}
.login-intro h1 {
    font-size:25px}
}

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

.nav-icon svg {
    width:18px;
    height:18px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round}
.nav-icon svg path {
    vector-effect:non-scaling-stroke}
.pipeline {
    overflow-x:auto;
    align-items:flex-end}
.stage {
    flex:0 0 64px}
.pipeline::-webkit-scrollbar {
    height:6px}
.pipeline::-webkit-scrollbar-thumb {
    background:#67551b;
    border-radius:9px}
.reports-workspace {
    overflow:hidden}
.report-controls {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:16px;
    border-bottom:1px solid var(--line)}
.report-controls label {
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--muted);
    font-size:14px}
.report-summary {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    padding:13px 16px}
.report-summary-item {
    display:flex;
    gap:7px;
    background:var(--canvas);
    border-radius:8px;
    padding:6px 9px;
    font-size:14px}
.report-summary-item b {
    color:var(--muted);
    font-weight:500}
.report-table-wrap {
    border-top:0}
.report-table-wrap table {
    min-width:760px}
.items-editor {
    border:1px solid var(--line);
    border-radius:9px;
    padding:11px;
    background:#201e12}
.items-editor-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:9px;
    font-size:14px}
.items-editor-table {
    overflow:auto}
.items-editor-row {
    display:grid;
    grid-template-columns:minmax(150px,1.8fr) 75px 105px 105px 38px;
    align-items:center;
    gap:6px;
    margin-bottom:6px}
.items-editor-row input {
    border:1px solid var(--line);
    border-radius:7px;
    padding:7px 8px;
    min-height:34px;
    width:100%;
    font-size:14px;
    background:var(--surface)}
.items-editor-label {
    color:var(--muted);
    font-size:14px}
.items-editor-label span {
    padding:0 8px}
.item-total {
    font:14px var(--latin);
    text-align:center}
.items-total {
    text-align:left;
    border-top:1px dashed var(--line);
    padding-top:8px;
    font-size:14px}
.items-total b {
    font-family:var(--latin)}
.team-select {
    min-height:110px!important}
.search-results {
    display:flex;
    flex-direction:column;
    gap:6px}
.search-result {
    display:flex;
    flex-direction:column;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:8px}
.search-result:hover {
    background:var(--yellow-soft)}
.search-result strong {
    font-size:14px}
.search-result small {
    font-size:14px;
    color:var(--muted)}
.finance-chart {
    padding:16px 19px 22px;
    min-height:225px}
.chart-bars {
    height:180px;
    display:flex;
    align-items:flex-end;
    gap:10px;
    overflow-x:auto;
    border-bottom:1px solid var(--line)}
.chart-bar-group {
    height:100%;
    min-width:52px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    gap:5px}
.chart-bars-pair {
    height:155px;
    display:flex;
    gap:4px;
    align-items:flex-end}
.chart-bars-pair i,.chart-bars-pair b {
    display:block;
    width:12px;
    border-radius:4px 4px 0 0;
    background:var(--green);
    min-height:4px}
.chart-bars-pair b {
    background:var(--red);
    opacity:.65}
.chart-bar-group small {
    font-size:14px;
    color:var(--muted);
    white-space:nowrap}
.dashboard-list {
    padding:5px 19px 11px;
    min-height:150px}
.dashboard-list-row {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid #302b17;
    font-size:14px}
.dashboard-list-row:last-child {
    border:0}
.dashboard-list-row small {
    color:var(--muted);
    font-size:14px;
    white-space:nowrap}


/* Respect HTML visibility state for loaders, badges, panels and popovers. */
[hidden]  {
    display: none !important;
}


/* Full black/yellow theme and accessible reading scale — version 3. */
html  {
     font-size: 17px;
     color-scheme: dark;
     scrollbar-color: #796017 #0b0b09;
     }

body  {
     font-size: 17px;
     font-weight: 500;
     line-height: 1.85;
     }

button, input, textarea, select  {
     color-scheme: dark;
     }

::selection  {
     background: var(--yellow);
     color: var(--ink);
     }

:focus-visible  {
     outline: 2px solid var(--yellow);
     outline-offset: 3px;
     }

.workspace, .content, .app-body  {
     background: var(--canvas);
     }

.sidebar  {
     background: #090909;
     padding-top: 22px;
     border-left: 1px solid var(--line);
     }

.topbar  {
     min-height: 88px;
     height: auto;
     padding-top: 12px;
     padding-bottom: 12px;
     background: #11110c;
     }

.brand-copy strong  {
     font-size: 22px;
     color: var(--yellow);
     }

.brand-copy small, .sidebar .brand-copy small  {
     font-size: 14px;
     color: var(--muted);
     }

.sidebar-context  {
     font-size: 14px;
     padding: 9px 10px;
     }

.main-nav  {
     gap: 22px;
     }

.nav-group-title  {
     font-size: 14px;
     padding-bottom: 8px;
     color: var(--muted);
     }

.nav-item  {
     font-size: 16px;
     font-weight: 600;
     min-height: 48px;
     padding: 11px;
     }

.nav-label  {
     white-space: normal;
     line-height: 1.6;
     }

.nav-icon, .nav-icon svg  {
     width: 22px;
     height: 22px;
     }

.nav-count  {
     font-size: 14px;
     }

.sidebar-note, .user-mini b  {
     font-size: 14px;
     }

.user-mini small  {
     font-size: 14px;
     }

.breadcrumbs  {
     font-size: 15px;
     flex-wrap: wrap;
     }

.global-search  {
     width: 300px;
     min-height: 46px;
     background: #1b1a10;
     }

.global-search input  {
     font-size: 15px;
     }

.global-search kbd  {
     font-size: 14px;
     background: #0b0b09;
     }

.account-copy  {
     min-width: 115px;
     }

.account-copy b  {
     font-size: 15px;
     }

.account-copy small  {
     font-size: 14px;
     }

.account-button .avatar  {
     width: 42px;
     height: 42px;
     font-size: 17px;
     }

.popover  {
     background: var(--surface);
     border-color: var(--line);
     }

.account-popover a, .account-popover button  {
     font-size: 16px;
     padding: 10px 12px;
     }

.popover-head strong  {
     font-size: 16px;
     }

.text-button  {
     font-size: 14px;
     }

.notification-item  {
     font-size: 15px;
     padding: 12px 14px;
     }

.notification-item small  {
     font-size: 14px;
     }

.content  {
     padding: 30px 28px 50px;
     }

.page-heading h1, .detail-title-line h1  {
     font-size: 32px;
     line-height: 1.5;
     letter-spacing: 0;
     }

.page-heading p  {
     font-size: 16px;
     color: var(--muted);
     }

.eyebrow, .panel-date  {
     font-size: 14px;
     }

.heading-actions  {
     flex-wrap: wrap;
     }

.demo-badge  {
     font-size: 14px;
     }

.button  {
     font-size: 16px;
     min-height: 46px;
     padding: 9px 16px;
     line-height: 1.6;
     }

.button-secondary  {
     background: #201e12;
     color: var(--text);
     border-color: #73601b;
     }

.button-secondary:hover  {
     background: #302914;
     border-color: var(--yellow);
     }

.button-primary, .nav-item.active  {
     color: #090909;
     }

.button-danger  {
     color: var(--yellow);
     background: #29210c;
     border: 1px dashed #ad8b26;
     }

.panel, .kpi-card, .detail-card, .report-card, .module-toolbar, .settings-nav, .settings-card, .form-drawer  {
     background: var(--surface);
     }

.kpi-card  {
     padding: 18px;
     }

.kpi-top  {
     font-size: 14px;
     font-weight: 600;
     gap: 9px;
     }

.kpi-value  {
     font-size: 34px;
     line-height: 1.45;
     letter-spacing: 0;
     color: var(--yellow);
     }

.kpi-meta  {
     font-size: 14px;
     }

.kpi-icon  {
     width: 34px;
     height: 34px;
     }

.panel-head h2  {
     font-size: 20px;
     letter-spacing: 0;
     }

.panel-link  {
     font-size: 14px;
     }

.pipeline  {
     min-height: 260px;
     }

.stage  {
     flex-basis: 94px;
     }

.stage-label  {
     font-size: 14px;
     line-height: 1.65;
     }

.stage-count  {
     font-size: 17px;
     }

.activity-row  {
     gap: 12px;
     padding: 14px 0;
     }

.activity-row p  {
     font-size: 15px;
     line-height: 1.8;
     }

.activity-row small  {
     font-size: 14px;
     }

.activity-mark  {
     width: 32px;
     height: 32px;
     }

.table-wrap table  {
     min-width: 800px;
     }

.table-wrap th  {
     font-size: 14px;
     font-weight: 700;
     padding: 14px 16px;
     color: var(--yellow);
     background: #1c1a0e;
     }

.table-wrap td  {
     font-size: 15px;
     padding: 15px 16px;
     }

.table-wrap tbody tr:hover  {
     background: #211e0e;
     }

.status-chip  {
     font-size: 14px;
     padding: 5px 10px;
     border: 1px solid #594b1b;
     line-height: 1.6;
     }

.status-chip[data-tone=success]  {
     background: #27230e;
     color: #ffe889;
     border-style: solid;
     }

.status-chip[data-tone=warning]  {
     background: #30270c;
     color: #f4ce14;
     border-style: dashed;
     }

.status-chip[data-tone=danger]  {
     background: #29200a;
     color: #ffdb45;
     border-width: 2px;
     }

.status-chip[data-tone=info]  {
     background: #202010;
     color: #e6ce62;
     }

.attendance-summary  {
     background: #090909;
     border: 1px solid var(--line);
     }

.attendance-summary b  {
     font-size: 28px;
     }

.attendance-summary span  {
     font-size: 15px;
     }

.attendance-row strong  {
     font-size: 15px;
     }

.attendance-row small  {
     font-size: 14px;
     }

.attendance-row .avatar  {
     width: 32px;
     height: 32px;
     font-size: 14px;
     }

.field-control, .filter-control, .form-field input, .form-field select, .form-field textarea, .login-form input, .items-editor-row input  {
     font-size: 16px;
     min-height: 46px;
     background: #0c0c09;
     color: var(--text);
     border-color: #67551b;
     }

.form-field input[readonly], .form-field select:disabled, .form-field textarea[readonly]  {
     background: #1b1a10;
     color: #baa855;
     }

input::placeholder, textarea::placeholder  {
     color: #a99b59;
     opacity: 1;
     }

.form-field > label, .login-form > label  {
     font-size: 16px;
     color: var(--yellow);
     }

.form-field .hint  {
     font-size: 14px;
     color: var(--muted);
     }

.module-search  {
     background: #0c0c09;
     }

.module-heading-meta, .record-number  {
     font-size: 14px;
     }

.pagination  {
     font-size: 15px;
     gap: 14px;
     flex-wrap: wrap;
     }

.page-button  {
     width: 38px;
     height: 38px;
     font-size: 15px;
     background: #201e12;
     color: var(--text);
     }

.page-button.active  {
     background: var(--yellow);
     color: #090909;
     border-color: var(--yellow);
     }

.detail-card-head h2  {
     font-size: 20px;
     }

.detail-field label  {
     font-size: 14px;
     }

.detail-field div  {
     font-size: 17px;
     line-height: 1.8;
     }

.back-link, .related-tab  {
     font-size: 15px;
     }

.drawer-head h2  {
     font-size: 25px;
     }

.drawer-head, .drawer-foot  {
     background: #11110c;
     }

.form-drawer  {
     width: min(600px,100vw);
     }

.attachment-row, .attachment-row a, .upload-form input[type=file]  {
     font-size: 15px;
     }

.attachment-row small  {
     font-size: 14px;
     }

.upload-form input[type=file]  {
     max-width: 240px;
     }

.upload-form select  {
     max-width: 170px;
     }

.inline-error, .global-error, .server-error, .server-success  {
     font-size: 16px;
     color: var(--text);
     border-color: #9b8027;
     background: #29220c;
     }

.empty-state, .error-state  {
     font-size: 16px;
     }

.toast  {
     font-size: 16px;
     line-height: 1.8;
     background: #14120a;
     border: 1px solid var(--yellow);
     color: var(--text);
     }

.report-card h3  {
     font-size: 20px;
     }

.report-card p  {
     font-size: 15px;
     }

.report-controls label, .report-summary-item  {
     font-size: 15px;
     }

.report-summary-item  {
     background: #24200d;
     }

.settings-nav button  {
     font-size: 16px;
     }

.settings-card h2  {
     font-size: 22px;
     }

.settings-card > p  {
     font-size: 16px;
     }

.settings-actions  {
     flex-wrap: wrap;
     }

.setup-code  {
     font-size: 16px;
     }

.items-editor  {
     background: #0c0c09;
     }

.items-editor-head, .items-total  {
     font-size: 16px;
     }

.items-editor-label  {
     font-size: 14px;
     }

.item-total  {
     font-size: 16px;
     }

.search-result strong  {
     font-size: 16px;
     }

.search-result small  {
     font-size: 14px;
     }

.dashboard-list-row  {
     font-size: 15px;
     line-height: 1.8;
     }

.dashboard-list-row small  {
     font-size: 14px;
     }

.chart-bars-pair i  {
     background: #f4ce14;
     }

.chart-bars-pair b  {
     background: #8b721f;
     opacity: 1;
     }

.chart-bar-group small  {
     font-size: 14px;
     }

.chart-bar-group  {
     min-width: 70px;
     }

.login-body  {
     background: #090909;
     }

.login-shell  {
     background: #151510;
     border: 1px solid var(--line);
     min-height: 760px;
     }

.login-panel  {
     background: #151510;
     color: var(--text);
     padding: 44px clamp(28px,5vw,68px);
     }

.login-brand  {
     color: var(--yellow);
     margin-bottom: 50px;
     }

.login-intro h1  {
     font-size: 34px;
     }

.login-intro p  {
     font-size: 16px;
     }

.login-form  {
     gap: 18px;
     }

.login-form input  {
     min-height: 50px;
     }

.login-aside  {
     background: #090909;
     color: var(--text);
     }

.login-aside h2  {
     font-size: 40px;
     }

.login-aside p  {
     font-size: 17px;
     line-height: 1.95;
     }

.login-options, .password-toggle  {
     font-size: 14px;
     }

.login-footnote, .otp-field .optional  {
     font-size: 14px;
     }

.login-quote p  {
     font-size: 16px;
     }

.loading-block span, .loading-block:after  {
     background: linear-gradient(100deg,#1b1a10 30%,#302b14 50%,#1b1a10 70%);
     background-size: 200% 100%;
     }

@media (max-width: 1250px)  {
    .global-search  {
     width: 230px;
     }

    .kpi-strip  {
     grid-template-columns: repeat(2,minmax(0,1fr));
     }

    .dashboard-grid  {
     grid-template-columns: minmax(0,1fr);
     }

    .pipeline-panel, .projects-panel, .activity-panel, .attendance-panel  {
     grid-column: 1;
     grid-row: auto;
     }

}

@media (max-width: 800px)  {
    .workspace  {
     margin-right: 0;
     }

    .topbar  {
     min-height: 72px;
     padding: 10px 15px;
     }

    .content  {
     padding: 22px 15px 35px;
     }

    .account-copy  {
     display: none;
     }

    .global-search  {
     width: 175px;
     }

    .page-heading h1, .detail-title-line h1  {
     font-size: 28px;
     }

    .login-shell  {
     min-height: 100vh;
     }

    .login-panel  {
     padding: 30px 24px;
     }

    .login-brand  {
     margin-bottom: 40px;
     }

    .login-intro h1  {
     font-size: 30px;
     }

    .login-aside  {
     display: none;
     }

    .reports-grid  {
     grid-template-columns: 1fr;
     }

}

@media (max-width: 520px)  {
    .breadcrumbs  {
     font-size: 14px;
     }

    .global-search  {
     width: 38px;
     }

    .kpi-strip  {
     grid-template-columns: 1fr;
     gap: 12px;
     }

    .kpi-card  {
     padding: 18px;
     }

    .kpi-value  {
     font-size: 32px;
     }

    .panel-head  {
     flex-wrap: wrap;
     }

    .panel-head h2  {
     font-size: 19px;
     }

    .stage-label  {
     font-size: 14px;
     }

    .stage-count  {
     font-size: 17px;
     }

    .table-wrap th, .table-wrap td  {
     padding: 14px;
     }

    .form-drawer  {
     width: 100vw;
     }

}

[hidden]  {
     display: none !important;
     }