:root {
        font-family: Inter, "Segoe UI", Arial, sans-serif;
        color: #172235;
        background: #f3f4f7;
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        --nav: #202a39;
        --blue: #5146e5;
        --green: #20c263;
        --yellow: #f2b900;
        --muted: #738094;
        --border: #e7e9ee;
        --card-shadow: 0 1px 2px #10182812, 0 2px 4px #10182808;
      }

      * {
        box-sizing: border-box;
      }

      body {
        min-width: 320px;
        min-height: 100vh;
        margin: 0;
      }

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

      button {
        cursor: pointer;
      }

      .topbar {
        position: sticky;
        z-index: 2;
        top: 0;
        background: var(--nav);
        box-shadow: 0 2px 5px #1018282c;
      }

      .nav {
        display: flex;
        width: min(100%, 1480px);
        min-height: 72px;
        margin: 0 auto;
        padding: 0 24px;
        align-items: center;
        gap: 7px;
        overflow-x: auto;
        scrollbar-width: thin;
      }

      .nav-link {
        flex: 0 0 auto;
        padding: 11px 13px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #f0f3f8;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
      }

      .nav-link:hover,
      .nav-link.active {
        background: var(--blue);
        color: #fff;
      }

      .nav-link.logout {
        margin-left: 4px;
        color: #ff6868;
      }

      .nav-link.logout:hover {
        background: #462f3a;
      }

      .app {
        width: min(100% - 40px, 1388px);
        margin: 0 auto;
        padding: 43px 0 64px;
      }

      .page-heading {
        display: flex;
        margin-bottom: 22px;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

      .page-heading h1 {
        margin: 0;
        font-size: clamp(23px, 3vw, 30px);
        letter-spacing: -0.7px;
      }

      .page-heading p {
        margin: 7px 0 0;
        color: var(--muted);
        font-size: 14px;
      }

      .demo-badge {
        display: inline-flex;
        padding: 8px 11px;
        align-items: center;
        gap: 7px;
        border: 1px solid #f3d596;
        border-radius: 99px;
        background: #fff9ea;
        color: #805b14;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
      }

      .toolbar {
        display: flex;
        margin-bottom: 17px;
        flex-wrap: wrap;
        align-items: center;
        gap: 9px;
      }

      .control,
      .search-input,
      .field-input,
      .field-select,
      .field-textarea {
        min-height: 43px;
        padding: 9px 13px;
        border: 1px solid #dfe3eb;
        border-radius: 8px;
        outline: none;
        background: #fff;
        color: #172235;
      }

      .control:focus,
      .search-input:focus,
      .field-input:focus,
      .field-select:focus,
      .field-textarea:focus {
        border-color: #8177f2;
        box-shadow: 0 0 0 3px #5146e51a;
      }

      .select-staff {
        min-width: 195px;
      }

      .button {
        display: inline-flex;
        min-height: 43px;
        padding: 9px 16px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 0;
        border-radius: 9px;
        background: #e9ebf1;
        color: #273349;
        font-weight: 650;
        transition:
          transform 120ms ease,
          filter 120ms ease;
      }

      .button:hover {
        transform: translateY(-1px);
        filter: brightness(0.97);
      }

      .button:focus-visible,
      .nav-link:focus-visible,
      .icon-button:focus-visible,
      .table-action:focus-visible {
        outline: 3px solid #8c84ff;
        outline-offset: 2px;
      }

      .button.primary,
      .button.graph {
        background: var(--blue);
        color: #fff;
      }

      .button.green {
        background: var(--green);
        color: #fff;
      }

      .button.yellow {
        background: var(--yellow);
        color: #fff;
      }

      .button.outline {
        border: 1px solid #dfe3eb;
        background: #fff;
        color: #303c50;
      }

      .view-switcher {
        display: flex;
        gap: 8px;
      }

      .stats-grid {
        display: grid;
        margin-bottom: 43px;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 25px;
      }

      .stat-card,
      .panel,
      .data-card {
        border: 1px solid #e9ebef;
        border-radius: 19px;
        background: #fff;
        box-shadow: var(--card-shadow);
      }

      .stat-card {
        min-height: 110px;
        padding: 23px 23px 18px;
      }

      .stat-label {
        display: block;
        margin-bottom: 8px;
        color: #718096;
        font-size: 14px;
        white-space: nowrap;
      }

      .stat-value {
        color: var(--stat-color, var(--blue));
        font-size: clamp(21px, 2.3vw, 28px);
        font-weight: 750;
        letter-spacing: -0.5px;
        white-space: nowrap;
      }

      .stat-value.currency {
        font-size: 23px;
      }

      .panels-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
      }

      .panel {
        min-height: 122px;
        padding: 25px 23px;
      }

      .panel-title {
        margin: 0 0 18px;
        color: var(--panel-color, #2667ff);
        font-size: 20px;
        font-weight: 750;
      }

      .panel-value {
        margin: 0;
        font-size: 23px;
        font-weight: 600;
      }

      .dashboard-extra {
        display: grid;
        margin-top: 25px;
        grid-template-columns: 1.4fr 1fr;
        gap: 25px;
      }

      .commission-report {
        overflow: hidden;
        border: 1px solid #e9ebef;
        border-radius: 14px;
        background: #fff;
        box-shadow: var(--card-shadow);
      }

      .commission-filter {
        display: flex;
        min-height: 78px;
        padding: 16px 20px;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid var(--border);
      }

      .commission-filter .control {
        min-width: 190px;
      }

      .commission-demo-note {
        margin-left: auto;
        color: var(--muted);
        font-size: 12px;
      }

      .commission-total {
        padding: 23px 21px;
        color: #3b4658;
        font-size: 18px;
        font-weight: 650;
      }

      .commission-total strong {
        margin-left: 8px;
        color: #1d2b43;
        font-size: 21px;
      }

      .commission-table-wrap {
        width: 100%;
        overflow-x: auto;
      }

      .commission-table {
        min-width: 900px;
      }

      .commission-table th,
      .commission-table td {
        padding: 15px 18px;
      }

      .commission-table th {
        text-transform: none;
      }

      .commission-table .commission-profit {
        color: #11834a;
        font-weight: 650;
      }

      .commission-value {
        color: #11834a;
        font-weight: 650;
      }

      .commission-table td small {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 11px;
      }

      .commission-empty {
        padding: 28px;
        color: var(--muted);
        text-align: center;
      }

      .commission-pagination {
        display: flex;
        padding: 17px 20px;
        justify-content: flex-end;
        gap: 7px;
      }

      .commission-pagination button {
        min-width: 34px;
        height: 34px;
        border: 1px solid #e2e6ee;
        border-radius: 7px;
        background: #fff;
        color: #48566c;
      }

      .commission-pagination button:hover,
      .commission-pagination button.active {
        border-color: var(--blue);
        background: var(--blue);
        color: #fff;
      }

      .chart-panel,
      .leader-panel {
        min-height: 270px;
        padding: 23px;
      }

      .panel-header {
        display: flex;
        margin-bottom: 20px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .panel-header h2,
      .table-heading h2 {
        margin: 0;
        font-size: 18px;
      }

      .chart-bars {
        display: flex;
        height: 168px;
        padding: 0 7px 25px;
        align-items: end;
        justify-content: space-around;
        gap: 14px;
        border-bottom: 1px solid var(--border);
      }

      .chart-column {
        display: flex;
        width: 9%;
        height: 100%;
        align-items: end;
        justify-content: center;
        position: relative;
      }

      .chart-bar {
        width: min(34px, 100%);
        min-height: 10px;
        border-radius: 6px 6px 0 0;
        background: linear-gradient(180deg, #8177f2, #5146e5);
      }

      .chart-column span {
        position: absolute;
        top: calc(100% + 8px);
        color: #8a94a4;
        font-size: 11px;
      }

      .leader-list {
        display: grid;
        gap: 13px;
      }

      .leader-item {
        display: flex;
        align-items: center;
        gap: 11px;
      }

      .leader-rank {
        display: grid;
        width: 31px;
        height: 31px;
        flex: 0 0 31px;
        place-items: center;
        border-radius: 50%;
        background: #efedff;
        color: var(--blue);
        font-size: 13px;
        font-weight: 750;
      }

      .leader-name {
        flex: 1;
        font-size: 14px;
        font-weight: 650;
      }

      .leader-score {
        color: #606d82;
        font-size: 13px;
        font-weight: 650;
      }

      .table-card {
        overflow: hidden;
      }

      .table-heading {
        display: flex;
        padding: 21px 22px;
        align-items: center;
        justify-content: space-between;
        gap: 13px;
        border-bottom: 1px solid var(--border);
      }

      .table-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
      }

      .search-input {
        min-width: min(240px, 100%);
      }

      .table-wrap {
        width: 100%;
        overflow-x: auto;
      }

      .task-admin-card {
        padding: 12px 11px 8px;
        border: 1px solid #e9ebef;
        border-radius: 13px;
        background: #fff;
        box-shadow: var(--card-shadow);
      }

      .task-admin-filter {
        display: flex;
        margin: 0 0 11px;
        flex-wrap: wrap;
        gap: 9px;
      }

      .task-admin-filter .search-input {
        width: 205px;
        min-width: 180px;
      }

      .task-admin-filter select {
        width: 160px;
      }

      .task-create-form {
        display: flex;
        margin: 0 0 12px;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
      }

      .task-create-form label {
        color: #536173;
        font-size: 12px;
        font-weight: 650;
      }

      .task-create-form select {
        width: min(100%, 270px);
      }

      .task-admin-table-wrap,
      .task-product-table-wrap {
        width: 100%;
        overflow: auto;
        border: 1px solid #e7e9ee;
        border-radius: 11px;
      }

      .task-admin-table {
        min-width: 940px;
      }

      .task-admin-table th,
      .task-admin-table td {
        padding: 10px 9px;
      }

      .task-admin-table th {
        background: #f2f3f6;
        color: #384355;
        text-transform: none;
      }

      .task-admin-table tbody tr:hover,
      .task-product-table tbody tr:hover {
        background: #fafbfc;
      }

      .task-assignment-product {
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .task-assignment-product em {
        color: #7e8795;
      }

      .task-status {
        color: #202735;
        font-weight: 650;
        text-transform: lowercase;
      }

      .task-status.complete {
        color: #16a15a;
      }

      .task-status.waiting {
        color: #778397;
      }

      .task-assign-button,
      .task-pick-product {
        min-height: 31px;
        padding: 5px 11px;
        border: 0;
        border-radius: 6px;
        background: #19c568;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
      }

      .task-assign-button:hover,
      .task-pick-product:hover {
        background: #10ae58;
      }

      .task-assign-button:focus-visible,
      .task-pick-product:focus-visible,
      .task-detail-button:focus-visible {
        outline: 3px solid #8c84ff;
        outline-offset: 2px;
      }

      .task-detail-button {
        min-height: 30px;
        padding: 5px 11px;
        border: 0;
        border-radius: 6px;
        background: #e8ebf0;
        color: #4b5565;
        font-size: 12px;
      }

      .task-demo-note {
        margin: 11px 3px 3px;
        color: var(--muted);
        font-size: 12px;
      }

      .task-product-screen {
        width: min(100%, 880px);
        margin: 0 auto;
        padding: 28px;
        border: 1px solid #e9ebef;
        border-radius: 14px;
        background: #fff;
        box-shadow: var(--card-shadow);
      }

      .task-product-heading {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 12px;
      }

      .task-product-heading h1 {
        margin: 0;
        text-align: center;
        font-size: 20px;
      }

      .task-product-heading .demo-badge {
        justify-self: end;
      }

      .task-product-filter {
        display: flex;
        margin: 20px 0;
        justify-content: center;
        gap: 9px;
      }

      .task-product-filter .control {
        width: 135px;
      }

      .task-filter-submit {
        background: #ff5c27;
        color: #fff;
      }

      .task-product-table {
        min-width: 620px;
      }

      .task-product-table th {
        background: #09c75a;
        color: #fff;
        text-transform: none;
      }

      .task-product-table td {
        white-space: normal;
      }

      .task-product-thumb {
        display: grid;
        width: 46px;
        height: 46px;
        place-items: center;
        border-radius: 8px;
        background: #e8f5f3;
        color: #198f93;
        font-size: 23px;
      }

      .task-product-name {
        min-width: 300px;
      }

      .task-pick-product {
        min-width: 48px;
        background: #2196f3;
      }

      .task-detail-modal dl {
        display: grid;
        margin: 20px 0;
        gap: 12px;
      }

      .task-detail-modal dl > div {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 12px;
      }

      .task-detail-modal dt {
        color: var(--muted);
      }

      .task-detail-modal dd {
        margin: 0;
        font-weight: 600;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
      }

      th,
      td {
        padding: 14px 19px;
        border-bottom: 1px solid #edf0f3;
        font-size: 13px;
        white-space: nowrap;
      }

      th {
        background: #fafbfc;
        color: #778397;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.35px;
      }

      tbody tr:last-child td {
        border-bottom: 0;
      }

      .status {
        display: inline-flex;
        padding: 5px 9px;
        border-radius: 99px;
        background: #edf8f1;
        color: #168344;
        font-size: 12px;
        font-weight: 700;
      }

      .status.pending {
        background: #fff5df;
        color: #a36d00;
      }

      .status.rejected,
      .status.inactive {
        background: #fff0f0;
        color: #bf3e3e;
      }

      .table-action {
        display: inline-flex;
        padding: 5px 8px;
        align-items: center;
        border: 0;
        border-radius: 6px;
        background: #eff0ff;
        color: #493fe1;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
      }

      .table-action + .table-action {
        margin-left: 5px;
      }

      .table-action.danger {
        background: #fff0f0;
        color: #bf3e3e;
      }

      .empty-state {
        padding: 35px 20px;
        color: var(--muted);
        text-align: center;
      }

      body[data-page="anggota"] .app {
        width: min(100% - 32px, 1152px);
        padding-top: 7px;
      }

      body[data-page="deposit"] .app {
        width: min(100% - 32px, 1152px);
        padding-top: 7px;
      }

      body:is([data-page="penarikan"], [data-page="rekening"], [data-page="aktivitas"]) .app {
        width: min(100% - 32px, 1152px);
        padding-top: 7px;
      }

      body[data-page="produk"] .app {
        width: min(100% - 32px, 1152px);
        padding-top: 7px;
      }

      body[data-page="pengaturan"] .app {
        width: min(100% - 32px, 1152px);
        padding-top: 8px;
      }

      body[data-page="anggota"] .topbar .nav {
        min-height: 60px;
      }

      body[data-page="deposit"] .topbar .nav {
        min-height: 60px;
      }

      body:is([data-page="penarikan"], [data-page="rekening"], [data-page="aktivitas"]) .topbar .nav {
        min-height: 60px;
      }

      body[data-page="produk"] .topbar .nav {
        min-height: 60px;
      }

      body[data-page="pengaturan"] .topbar .nav {
        min-height: 60px;
      }

      .deposit-card {
        overflow: hidden;
        padding: 11px 11px 9px;
        border: 1px solid #e6e8ec;
        border-radius: 10px;
        background: #fff;
        box-shadow: var(--card-shadow);
      }

      .deposit-search {
        display: flex;
        margin-bottom: 10px;
        align-items: center;
        gap: 8px;
      }

      .deposit-search .search-input {
        width: 235px;
        min-height: 36px;
        padding: 7px 12px;
        font-size: 13px;
      }

      .deposit-search .button {
        min-height: 36px;
        padding: 7px 15px;
      }

      .deposit-table-wrap {
        width: 100%;
        overflow-x: auto;
        border: 1px solid #e7e9ee;
        border-radius: 12px;
      }

      .deposit-table {
        min-width: 900px;
        table-layout: fixed;
      }

      .deposit-table th,
      .deposit-table td {
        padding: 10px 9px;
      }

      .deposit-table th {
        background: #f2f3f6;
        color: #384355;
        text-transform: none;
      }

      .deposit-table th:nth-child(1) { width: 60px; }
      .deposit-table th:nth-child(2) { width: 220px; }
      .deposit-table th:nth-child(3) { width: 150px; }
      .deposit-table th:nth-child(4) { width: 190px; }
      .deposit-table th:nth-child(5) { width: 95px; }
      .deposit-table th:nth-child(6) { width: 120px; }
      .deposit-table th:nth-child(7) { width: 205px; }

      .deposit-table tbody tr:nth-child(odd) {
        background: #fafbfc;
      }

      .deposit-proof {
        display: grid;
        width: 58px;
        height: 60px;
        place-content: center;
        justify-items: center;
        gap: 2px;
        border: 1px solid #e2e5e9;
        border-radius: 5px;
        background: linear-gradient(#fff, #f7f8fa);
        color: #788497;
        box-shadow: 0 1px 3px #18243a14;
      }

      .deposit-proof > span {
        font-size: 25px;
        line-height: 1;
      }

      .deposit-proof small {
        font-size: 9px;
      }

      .deposit-status {
        display: inline-flex;
        padding: 5px 8px;
        border-radius: 5px;
        background: #dcf8e8;
        color: #188348;
        font-size: 11px;
        font-weight: 700;
      }

      .deposit-status.pending {
        background: #fff4cf;
        color: #a36d00;
      }

      .deposit-status.rejected {
        background: #ffe4e4;
        color: #c03434;
      }

      .deposit-action {
        min-height: 27px;
        padding: 5px 8px;
        border: 0;
        border-radius: 5px;
        font-size: 11px;
        white-space: nowrap;
      }

      .deposit-action + .deposit-action {
        margin-left: 5px;
      }

      .deposit-action.confirm {
        background: #dcf8e8;
        color: #188348;
      }

      .deposit-action.reject {
        background: #ffe4e4;
        color: #d33a3a;
      }

      .deposit-action:hover {
        filter: brightness(.96);
      }

      .deposit-proof:focus-visible,
      .deposit-action:focus-visible {
        outline: 3px solid #8c84ff;
        outline-offset: 2px;
      }

      .deposit-no-action {
        color: #8892a0;
      }

      .deposit-demo-note {
        margin: 10px 2px 0;
        color: var(--muted);
        font-size: 11px;
      }

      .deposit-proof-modal {
        text-align: center;
      }

      .deposit-proof-preview {
        display: grid;
        width: 100px;
        height: 112px;
        margin: 16px auto;
        place-items: center;
        border: 1px solid #e1e5eb;
        border-radius: 8px;
        background: #f6f8fa;
        color: #8190a3;
        font-size: 48px;
      }

      .deposit-proof-modal p {
        color: var(--muted);
        line-height: 1.6;
      }

      .withdrawal-card,
      .account-card,
      .activity-card {
        overflow: hidden;
        padding: 11px 11px 9px;
        border: 1px solid #e6e8ec;
        border-radius: 10px;
        background: #fff;
        box-shadow: var(--card-shadow);
      }

      .withdrawal-table-wrap,
      .account-table-wrap,
      .activity-table-wrap {
        width: 100%;
        overflow: auto;
        border: 1px solid #e7e9ee;
        border-radius: 12px;
      }

      .withdrawal-table,
      .account-table,
      .activity-table {
        min-width: 940px;
        table-layout: fixed;
      }

      .withdrawal-table th,
      .withdrawal-table td,
      .account-table th,
      .account-table td,
      .activity-table th,
      .activity-table td {
        padding: 10px 9px;
      }

      .withdrawal-table th,
      .account-table th,
      .activity-table th {
        background: #f2f3f6;
        color: #384355;
        text-transform: none;
      }

      .withdrawal-table th:nth-child(1) { width: 165px; }
      .withdrawal-table th:nth-child(2) { width: 105px; }
      .withdrawal-table th:nth-child(3) { width: 160px; }
      .withdrawal-table th:nth-child(4) { width: 150px; }
      .withdrawal-table th:nth-child(5) { width: 120px; }
      .withdrawal-table th:nth-child(6) { width: 180px; }
      .withdrawal-table th:nth-child(7) { width: 145px; }
      .withdrawal-table th:nth-child(8) { width: 155px; }

      .withdrawal-table td,
      .activity-table td {
        white-space: normal;
      }

      .withdrawal-status {
        display: inline-flex;
        padding: 4px 7px;
        border-radius: 5px;
        background: #dcf8e8;
        color: #188348;
        font-size: 11px;
        font-weight: 700;
      }

      .withdrawal-status.pending {
        background: #fff4cf;
        color: #a36d00;
      }

      .withdrawal-status.rejected {
        background: #ffe4e4;
        color: #c03434;
      }

      .withdrawal-reason {
        display: block;
        margin-top: 4px;
        color: #c03434;
        font-size: 11px;
        line-height: 1.4;
      }

      .withdrawal-action,
      .account-action {
        min-height: 27px;
        padding: 5px 8px;
        border: 0;
        border-radius: 5px;
        font-size: 11px;
        white-space: nowrap;
      }

      .withdrawal-action + .withdrawal-action,
      .account-action + .account-action {
        margin-left: 5px;
      }

      .withdrawal-action.confirm,
      .account-action.edit {
        background: #dceaff;
        color: #2563bb;
      }

      .withdrawal-action.reject,
      .account-action.delete {
        background: #ffe4e4;
        color: #c03434;
      }

      .account-table {
        min-width: 980px;
      }

      .account-table th:nth-child(1) { width: 55px; }
      .account-table th:nth-child(2) { width: 220px; }
      .account-table th:nth-child(3) { width: 145px; }
      .account-table th:nth-child(4) { width: 220px; }
      .account-table th:nth-child(5) { width: 220px; }
      .account-table th:nth-child(6) { width: 190px; }
      .account-table th:nth-child(7) { width: 110px; }

      .activity-table {
        min-width: 900px;
      }

      .activity-table th:nth-child(1) { width: 200px; }
      .activity-table th:nth-child(2) { width: 140px; }
      .activity-table th:nth-child(3) { width: 280px; }
      .activity-table th:nth-child(4),
      .activity-table th:nth-child(5),
      .activity-table th:nth-child(6) { width: 160px; }

      .activity-table td:nth-child(n + 4) {
        color: #788397;
        text-align: right;
      }

      .activity-table .balance-increase {
        color: #16a15a !important;
        font-weight: 650;
      }

      .activity-table .balance-decrease {
        color: #d94747 !important;
        font-weight: 650;
      }

      .account-demo-note {
        margin: 10px 2px 0;
        color: var(--muted);
        font-size: 11px;
      }

      .product-card {
        overflow: hidden;
        padding: 11px;
        border: 1px solid #e6e8ec;
        border-radius: 10px;
        background: #fff;
        box-shadow: var(--card-shadow);
      }

      .staff-card {
        overflow: hidden;
        padding: 11px;
        border: 1px solid #e6e8ec;
        border-radius: 10px;
        background: #fff;
        box-shadow: var(--card-shadow);
      }

      .staff-toolbar {
        display: flex;
        margin-bottom: 10px;
      }

      .staff-toolbar .button {
        min-height: 34px;
        padding: 7px 14px;
        font-size: 12px;
      }

      .staff-table-wrap {
        width: 100%;
        max-height: min(58vh, 430px);
        overflow: auto;
        border: 1px solid #e3e6eb;
        border-radius: 7px;
      }

      .staff-table {
        width: 100%;
        min-width: 700px;
        table-layout: fixed;
      }

      .staff-table th,
      .staff-table td {
        padding: 8px 10px;
        border-bottom: 1px solid #e4e7ec;
        text-align: left;
      }

      .staff-table th {
        position: sticky;
        z-index: 1;
        top: 0;
        background: #f1f2f5;
        color: #384355;
        font-size: 12px;
        font-weight: 700;
        text-transform: none;
      }

      .staff-table td {
        height: 37px;
        color: #465267;
        font-size: 12px;
      }

      .staff-table tbody tr:last-child td {
        border-bottom: 0;
      }

      .staff-table th:nth-child(1) { width: 14%; }
      .staff-table th:nth-child(2) { width: 18%; }
      .staff-table th:nth-child(3) { width: 13%; }
      .staff-table th:nth-child(4) { width: 32%; }
      .staff-table th:nth-child(5) { width: 23%; }

      .staff-row-actions {
        white-space: nowrap;
      }

      .staff-row-actions .account-action {
        min-width: 42px;
        min-height: 22px;
        margin: 0 4px 0 0;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 10px;
      }

      .staff-row-actions .account-action.edit {
        background: #fff4bf;
        color: #9a6b00;
      }

      .staff-modal-backdrop {
        background: #10182880;
      }

      .staff-modal {
        width: min(100%, 410px);
        padding: 20px 21px;
        border-radius: 12px;
      }

      .staff-modal h2 {
        margin: 0 0 15px;
        color: #15191f;
        font-size: 18px;
      }

      .staff-modal .modal-form {
        gap: 10px;
      }

      .staff-modal .field-input,
      .staff-modal .field-select {
        width: 100%;
        min-height: 36px;
        padding: 8px 10px;
        border: 1px solid #e1e5eb;
        border-radius: 6px;
        background: #fff;
        color: #252d38;
        font-size: 13px;
      }

      .staff-modal .field-input::placeholder {
        color: #9aa4b2;
      }

      .staff-modal .modal-actions {
        margin-top: 1px;
      }

      .staff-modal .modal-actions .button {
        min-height: 33px;
        padding: 7px 13px;
        font-size: 12px;
      }

      .staff-modal-note {
        margin: 0;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.45;
      }

      .product-toolbar {
        display: flex;
        margin-bottom: 12px;
      }

      .product-toolbar .button {
        min-height: 36px;
        padding: 7px 15px;
        font-size: 13px;
      }

      .product-table-wrap {
        width: 100%;
        max-height: min(58vh, 430px);
        overflow: auto;
      }

      .product-table {
        min-width: 820px;
        table-layout: fixed;
      }

      .product-table th,
      .product-table td {
        padding: 8px 9px;
      }

      .product-table th {
        position: sticky;
        z-index: 1;
        top: 0;
        background: #f2f3f6;
        color: #384355;
        text-transform: none;
      }

      .product-table th:nth-child(1) { width: 70px; }
      .product-table th:nth-child(2) { width: auto; }
      .product-table th:nth-child(3) { width: 145px; }
      .product-table th:nth-child(4) { width: 85px; }

      .product-table td {
        height: 59px;
      }

      .product-thumb {
        display: grid;
        width: 43px;
        height: 43px;
        place-items: center;
        overflow: hidden;
        border: 1px solid #e1e5eb;
        border-radius: 4px;
        background: #f8fafc;
        color: #94a0af;
        font-size: 23px;
      }

      .product-thumb img,
      .product-image-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .product-name {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .product-card .account-action {
        display: flex;
        min-width: 42px;
        min-height: 23px;
        margin: 0 auto 3px;
        justify-content: center;
      }

      .product-modal-backdrop {
        background: #10182880;
      }

      .product-modal {
        width: min(100%, 615px);
        padding: 17px 19px 13px;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 22px 70px #10182855;
      }

      .product-modal-heading {
        display: flex;
        margin-bottom: 16px;
        align-items: center;
        justify-content: space-between;
      }

      .product-modal-heading h2 {
        margin: 0;
        font-size: 17px;
      }

      .product-modal-close {
        width: 30px;
        height: 30px;
        border: 0;
        background: transparent;
        color: #8792a1;
        font-size: 23px;
        line-height: 1;
      }

      .product-modal form {
        display: grid;
        grid-template-columns: 183px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
      }

      .product-image-picker {
        display: block;
        cursor: pointer;
      }

      .product-image-picker input {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
      }

      .product-image-preview {
        display: grid;
        width: 100%;
        height: 52px;
        place-items: center;
        overflow: hidden;
        border: 2px dashed #e1e5eb;
        border-radius: 9px;
        color: #8a94a4;
        font-size: 13px;
      }

      .product-image-picker.dragging .product-image-preview,
      .product-image-picker:focus-within .product-image-preview {
        border-color: var(--blue);
        background: #f6f5ff;
      }

      .product-form-fields {
        display: grid;
        gap: 10px;
      }

      .product-form-fields .field-input {
        width: 100%;
        min-height: 37px;
        font-size: 13px;
      }

      .product-form-actions {
        display: flex;
        margin-top: 7px;
        justify-content: end;
        gap: 8px;
      }

      .product-form-actions .button {
        min-height: 35px;
        padding: 7px 14px;
        font-size: 13px;
      }

      .product-modal-note {
        margin: 8px 0 0;
        color: var(--muted);
        font-size: 10px;
      }

      .product-modal-close:focus-visible,
      .product-image-picker:focus-within {
        outline: 2px solid #8177f2;
        outline-offset: 3px;
      }

      .account-edit-page {
        width: min(100%, 526px);
        margin: 34px auto;
        padding: 23px 22px 21px;
        border: 1px solid #e9ebef;
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--card-shadow);
      }

      .account-edit-page h1 {
        margin: 0 0 23px;
        font-size: 21px;
      }

      .account-edit-page form {
        display: grid;
        gap: 19px;
      }

      .account-edit-page form > label {
        display: grid;
        gap: 8px;
        color: #526074;
        font-size: 13px;
        font-weight: 500;
      }

      .account-edit-page .field-input {
        min-height: 40px;
        color: #202b3a;
      }

      .account-edit-actions {
        display: flex;
        align-items: center;
        gap: 11px;
      }

      .account-edit-actions .button.green {
        background: #16a34a;
      }

      .account-edit-actions .button.outline {
        border: 0;
        padding-left: 0;
        background: transparent;
        color: #5e6c7c;
      }

      .worker-bank-list {
        display: grid;
        margin: 14px 0;
        gap: 9px;
      }

      .worker-bank-item {
        display: grid;
        padding: 12px;
        gap: 5px;
        border: 1px solid #e5e9ef;
        border-radius: 9px;
        background: #f8fafc;
      }

      .worker-bank-item span {
        color: var(--muted);
        font-size: 13px;
      }

      .withdrawal-action:focus-visible,
      .account-action:focus-visible {
        outline: 3px solid #8c84ff;
        outline-offset: 2px;
      }

      .members-card {
        overflow: hidden;
        padding: 12px 11px 10px;
        border: 1px solid #e6e8ec;
        border-radius: 9px;
        background: #fff;
        box-shadow: var(--card-shadow);
      }

      .members-search {
        display: flex;
        margin-bottom: 11px;
        align-items: center;
        gap: 8px;
      }

      .members-search .search-input {
        width: 237px;
        min-height: 36px;
        padding: 7px 12px;
        font-size: 13px;
      }

      .members-search .button {
        min-height: 36px;
        padding: 7px 15px;
      }

      .members-table {
        min-width: 1020px;
        table-layout: fixed;
      }

      .members-table th:nth-child(1) { width: 55px; }
      .members-table th:nth-child(2) { width: 220px; }
      .members-table th:nth-child(3) { width: 145px; }
      .members-table th:nth-child(4) { width: 145px; }
      .members-table th:nth-child(5),
      .members-table th:nth-child(6) { width: 120px; }
      .members-table th:nth-child(7) { width: 155px; }
      .members-table th:nth-child(8) { width: 80px; }
      .members-table th:nth-child(9) { width: 55px; }

      .members-table th,
      .members-table td {
        padding: 7px 9px;
        font-size: 13px;
      }

      .members-table th {
        background: #f2f3f6;
        color: #3d485a;
        font-size: 12px;
        text-transform: none;
        letter-spacing: 0;
      }

      .member-inline-control {
        display: flex;
        align-items: center;
        gap: 7px;
      }

      .member-level,
      .member-credit-score {
        width: 96px;
        min-height: 28px;
        padding: 4px 8px;
        border: 1px solid #e1e5eb;
        border-radius: 7px;
        background: #fff;
        color: #536073;
        font-size: 13px;
      }

      .member-credit-score {
        width: 74px;
      }

      .member-save {
        padding: 3px 0;
        border: 0;
        background: transparent;
        color: #19a958;
        font-size: 13px;
      }

      .member-save:hover {
        color: #117d3e;
        text-decoration: underline;
      }

      .member-edit {
        display: inline-grid;
        width: 28px;
        height: 28px;
        padding: 3px;
        place-items: center;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #161b22;
      }

      .member-edit:hover {
        background: #eff0f3;
      }

      .member-edit svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
      }

      .member-save:focus-visible,
      .member-edit:focus-visible {
        outline: 3px solid #8c84ff;
        outline-offset: 2px;
      }

      .modal.member-action-modal {
        width: min(100%, 675px);
        padding: 27px;
        border-radius: 14px;
      }

      .member-action-layout {
        display: grid;
        min-height: 224px;
        grid-template-columns: 208px minmax(0, 1fr);
        align-items: stretch;
        gap: 18px;
      }

      .member-action-tabs {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .member-action-tab {
        min-height: 45px;
        padding: 10px 17px;
        border: 0;
        border-radius: 9px;
        background: #e2e8f0;
        color: #111827;
        text-align: left;
        transition: background 120ms ease;
      }

      .member-action-tab:hover {
        background: #d6deea;
      }

      .member-action-tab.active {
        background: #dfe6ef;
        color: #111827;
      }

      .member-action-tab:focus-visible {
        outline: 3px solid #8c84ff;
        outline-offset: 2px;
      }

      .member-action-content {
        min-width: 0;
        padding-top: 9px;
      }

      .member-action-form {
        display: grid;
        gap: 10px;
      }

      .member-action-label {
        color: #161616;
        font-size: 16px;
        font-weight: 500;
      }

      .member-action-form .field-input,
      .member-action-form .field-select {
        width: 100%;
        min-height: 38px;
        padding: 7px 11px;
      }

      .member-action-note {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.45;
      }

      .member-action-form .modal-actions {
        margin-top: 8px;
      }

      .member-lock-toggle {
        display: flex;
        min-height: 28px;
        align-items: center;
        gap: 9px;
        color: #111827;
        font-size: 16px;
      }

      .member-lock-toggle input {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--blue);
      }

      .worker-nav {
        justify-content: center;
      }

      .worker-nav-title {
        margin: 0 12px;
        color: #f0f3f8;
        font-size: 14px;
        font-weight: 700;
      }

      .worker-app {
        width: min(100% - 40px, 1050px);
      }

      .worker-notifications-card {
        overflow: hidden;
      }

      .worker-notifications-toolbar {
        display: flex;
        padding: 18px 20px;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        border-bottom: 1px solid var(--border);
      }

      .worker-notifications-toolbar label {
        color: #48566c;
        font-size: 13px;
        font-weight: 650;
      }

      .worker-notifications-toolbar .control {
        min-width: 150px;
        min-height: 38px;
      }

      .worker-notifications-list {
        display: grid;
        padding: 16px;
        gap: 11px;
      }

      .worker-notification {
        padding: 15px 16px;
        border: 1px solid var(--border);
        border-left: 4px solid #8792a2;
        border-radius: 9px;
        background: #fff;
      }

      .worker-notification.unread {
        background: #fafbff;
      }

      .worker-notification.locked {
        border-left-color: #d94848;
      }

      .worker-notification.unlocked {
        border-left-color: #20a45a;
      }

      .worker-notification-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .worker-notification-heading strong {
        color: #253146;
        font-size: 15px;
      }

      .worker-notification-status {
        color: var(--muted);
        font-size: 12px;
      }

      .worker-notification p {
        margin: 9px 0 0;
        color: #536073;
        font-size: 13px;
      }

      .worker-notification-reason {
        padding: 10px 12px;
        border-radius: 7px;
        background: #f3f5f8;
        line-height: 1.5;
        overflow-wrap: anywhere;
      }

      .worker-notification time {
        display: block;
        margin: 10px 0;
        color: var(--muted);
        font-size: 12px;
      }

      .worker-notifications-empty {
        margin: 0;
        padding: 36px 16px;
        color: var(--muted);
        text-align: center;
      }

      .worker-storefront {
        min-height: 100vh;
        padding-bottom: 86px;
        overflow-x: clip;
        background: #f5f5f5;
      }

      .worker-store-header {
        position: sticky;
        z-index: 3;
        top: 0;
        display: flex;
        height: 62px;
        padding: 0 22px;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ededed;
        background: #fff;
      }

      .worker-brand {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #19a957;
        font-size: 20px;
        font-weight: 750;
        letter-spacing: -0.5px;
        text-decoration: none;
      }

      .worker-brand-mark {
        display: grid;
        width: 32px;
        height: 36px;
        place-items: center;
      }

      .worker-brand-mark svg {
        width: 32px;
        height: 36px;
        overflow: visible;
      }

      .worker-brand-mark svg path:first-child {
        fill: none;
        stroke: #303030;
        stroke-linecap: round;
        stroke-width: 8;
      }

      .worker-brand-mark svg path:nth-child(2) {
        fill: #61bf50;
        stroke: #303030;
        stroke-width: 5;
      }

      .worker-brand-mark svg circle:nth-of-type(1),
      .worker-brand-mark svg circle:nth-of-type(2) {
        fill: #fff;
        stroke: #303030;
        stroke-width: 4;
      }

      .worker-brand-mark svg circle:nth-of-type(3),
      .worker-brand-mark svg circle:nth-of-type(4) {
        fill: #303030;
      }

      .worker-brand-mark svg path:last-child {
        fill: #ffd34e;
        stroke: #303030;
        stroke-width: 2;
      }

      .worker-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .worker-icon-button {
        position: relative;
        display: grid;
        width: 40px;
        height: 40px;
        padding: 8px;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #424b57;
        text-decoration: none;
      }

      .worker-icon-button:hover,
      .worker-icon-button.selected {
        background: #eef8f1;
        color: #15994c;
      }

      .worker-icon-button svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
      }

      .worker-notification-count {
        position: absolute;
        top: 0;
        right: -1px;
        display: grid;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        place-items: center;
        border: 2px solid #fff;
        border-radius: 99px;
        background: #e23e45;
        color: #fff;
        font-size: 9px;
        font-weight: 750;
      }

      .worker-store-main {
        width: min(100% - 40px, 1500px);
        min-height: calc(100vh - 148px);
        margin: 0 auto;
        padding: 0 0 25px;
      }

      .worker-home-ticker {
        display: flex;
        height: 164px;
        align-items: flex-end;
        justify-content: flex-end;
        overflow: hidden;
        color: #3d424a;
        font-size: 13px;
        white-space: nowrap;
      }

      .worker-home-ticker span {
        max-width: 100%;
        padding: 0 0 13px 20px;
        overflow: hidden;
        text-overflow: clip;
      }

      .worker-product-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px;
      }

      .worker-product-card {
        min-width: 0;
        padding: 10px;
        overflow: hidden;
        border: 1px solid #e3e3e3;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 3px #0000000a;
      }

      .worker-product-art {
        overflow: hidden;
        aspect-ratio: 1.7;
        border-radius: 6px;
        background: #e5e9e9;
      }

      .worker-product-art svg {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .worker-product-info {
        padding: 12px 5px 5px;
      }

      .worker-product-info h2,
      .worker-task-card h2,
      .worker-order-card h2 {
        margin: 0;
        color: #27313c;
        font-size: 16px;
      }

      .worker-product-info p {
        margin: 5px 0 12px;
        color: #7b838d;
        font-size: 13px;
      }

      .worker-product-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .worker-product-footer strong {
        color: #15994c;
        font-size: 15px;
      }

      .worker-product-task-note {
        color: #75808b;
        font-size: 11px;
        font-weight: 600;
      }

      .worker-product-footer button,
      .worker-task-button,
      .worker-order-submit,
      .worker-empty-button {
        min-height: 36px;
        padding: 0 15px;
        border: 0;
        border-radius: 8px;
        background: #19a957;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
      }

      .worker-product-footer button:hover,
      .worker-task-button:hover,
      .worker-order-submit:hover,
      .worker-empty-button:hover {
        background: #128744;
      }

      .worker-bottom-nav {
        position: fixed;
        z-index: 5;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        min-height: 68px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 6px max(12px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        border: 1px solid #e8e8e8;
        border-bottom: 0;
        border-radius: 16px 16px 0 0;
        background: #fff;
        box-shadow: 0 -3px 14px #202a3910;
      }

      .worker-bottom-link {
        display: flex;
        min-width: 0;
        padding: 3px 5px;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        border: 0;
        background: transparent;
        color: #555;
        font-size: 12px;
        text-decoration: none;
      }

      .worker-bottom-link svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
      }

      .worker-bottom-link.active {
        color: #19a957;
      }

      .worker-bottom-link.active svg {
        fill: currentColor;
      }

      .worker-bottom-link[data-worker-tab="tasks"].active svg {
        fill: none;
        stroke: currentColor;
      }

      .worker-section-heading {
        display: flex;
        margin: 32px 0 20px;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
      }

      .worker-section-heading h1 {
        margin: 5px 0 0;
        color: #202a39;
        font-size: clamp(25px, 4vw, 34px);
        letter-spacing: -0.8px;
      }

      .worker-section-heading p {
        margin: 7px 0 0;
        color: #738094;
        font-size: 14px;
      }

      .worker-eyebrow {
        color: #15994c;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
      }

      .worker-task-list,
      .worker-order-list,
      .worker-profile-menu {
        display: grid;
        gap: 12px;
      }

      .worker-task-dashboard {
        display: grid;
        width: min(100%, 420px);
        margin: 16px auto 24px;
        gap: 13px;
      }

      .worker-task-balance {
        display: flex;
        min-height: 90px;
        padding: 15px 17px;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        border-radius: 15px;
        background: linear-gradient(125deg, #0a703e, #16a34a);
        box-shadow: 0 7px 14px #00000018;
        color: #fff;
      }

      .worker-task-balance > div:first-child {
        display: grid;
        gap: 4px;
      }

      .worker-task-balance > div:first-child > span {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 600;
        opacity: 0.93;
      }

      .worker-task-balance small {
        padding: 2px 6px;
        border-radius: 99px;
        background: #ffffff26;
        font-size: 9px;
        font-weight: 500;
      }

      .worker-task-balance > div:first-child > strong {
        font-size: 21px;
        font-weight: 750;
        letter-spacing: -0.3px;
      }

      .worker-task-balance-actions {
        display: grid;
        flex: 0 0 auto;
        gap: 6px;
      }

      .worker-task-balance-actions button {
        min-width: 67px;
        min-height: 25px;
        padding: 3px 10px;
        border: 0;
        border-radius: 99px;
        background: #fff;
        color: #0a703e;
        font-size: 11px;
        font-weight: 700;
      }

      .worker-task-balance-actions button:last-child {
        background: #dc2626;
        color: #fff;
      }

      .worker-task-balance-actions button:hover {
        filter: brightness(0.93);
      }

      .worker-task-balance-actions button.locked {
        background: #a32222;
      }

      .worker-task-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .worker-task-stats article {
        display: grid;
        min-height: 66px;
        padding: 11px;
        align-content: center;
        justify-items: center;
        gap: 3px;
        border-radius: 15px;
        background: #fff;
        box-shadow: 0 4px 12px #0000000d;
        text-align: center;
      }

      .worker-task-stats strong {
        color: #666;
        font-size: 11px;
        font-weight: 600;
      }

      .worker-task-stats span {
        color: #0a703e;
        font-size: 16px;
        font-weight: 700;
      }

      .worker-task-membership {
        display: grid;
        min-height: 62px;
        padding: 11px 15px;
        align-content: center;
        gap: 2px;
        border-left: 4px solid #00aa0e;
        border-radius: 15px;
        background: #fff;
        font-size: 13px;
      }

      .worker-task-membership strong {
        color: #303740;
        font-size: 14px;
      }

      .worker-task-membership span {
        color: #626b74;
        font-size: 12px;
      }

      .worker-task-start {
        width: 100%;
        min-height: 44px;
        border: 0;
        border-radius: 99px;
        background: linear-gradient(125deg, #0a703e, #16a34a);
        color: #fff;
        font-size: 13px;
        font-weight: 750;
      }

      .worker-task-start:hover:not(:disabled) {
        filter: brightness(0.94);
      }

      .worker-task-start:disabled {
        background: #86948b;
        cursor: not-allowed;
      }

      .worker-task-activity {
        display: flex;
        min-height: 20px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #807f7f;
        text-align: center;
      }

      .worker-task-activity > span {
        color: #19a957;
        font-size: 14px;
      }

      .worker-task-activity p {
        margin: 0;
        font-size: 12px;
      }

      .worker-withdrawal-warning {
        margin: 0;
        padding: 10px 12px;
        border: 1px solid #ffd1d1;
        border-radius: 9px;
        background: #fff4f4;
        color: #9b2525;
        font-size: 12px;
        line-height: 1.5;
      }

      .worker-task-info {
        padding: 13px;
        border: 1px solid #e6ffce;
        border-radius: 12px;
        background: #f9fdf9;
        color: #47515a;
        font-size: 12px;
        line-height: 1.45;
      }

      .worker-task-info strong {
        color: #263238;
      }

      .worker-task-card,
      .worker-order-card,
      .worker-profile-card,
      .worker-profile-menu {
        padding: 17px;
        border: 1px solid #e8eaed;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 3px #00000008;
      }

      .worker-orders-header {
        display: grid;
        width: 100vw;
        min-height: 48px;
        margin-left: calc(50% - 50vw);
        place-items: center;
        background: linear-gradient(125deg, #0a703e, #16a34a);
        color: #fff;
        font-size: 16px;
        font-weight: 650;
      }

      .worker-order-page {
        width: min(100% - 28px, 420px);
        margin: 0 auto;
        padding: 14px 0 24px;
      }

      .worker-order-demo-note {
        margin: 0 0 10px;
        color: #65717e;
        font-size: 11px;
        text-align: center;
      }

      .worker-order-list {
        display: grid;
        gap: 12px;
      }

      .worker-order-card {
        display: block;
        min-height: 0;
        padding: 10px;
        border: 0;
        border-radius: 15px;
      }

      .worker-order-list .worker-order-card {
        display: block;
        min-height: 0;
      }

      .worker-order-product {
        display: flex;
        padding: 10px;
        align-items: flex-start;
        gap: 11px;
      }

      .worker-order-card > .worker-order-product {
        flex: initial;
        min-width: 0;
      }

      .worker-order-image {
        width: 60px;
        height: 60px;
        flex: 0 0 auto;
        overflow: hidden;
        border-radius: 9px;
        background: #eef2f2;
      }

      .worker-order-image svg {
        display: block;
        width: 100%;
        height: 100%;
      }

      .worker-order-product-info {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
      }

      .worker-order-product-info h2 {
        display: -webkit-box;
        overflow: hidden;
        color: #222;
        font-size: 13px;
        font-weight: 550;
        line-height: 1.4;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .worker-order-state {
        padding: 3px 9px;
        border-radius: 30px;
        font-size: 10px;
        font-weight: 650;
      }

      .worker-order-state.selected {
        background: #e7f2ff;
        color: #0874df;
      }

      .worker-order-state.complete {
        background: #e7f6eb;
        color: #238d40;
      }

      .worker-order-prices {
        display: grid;
        padding: 9px 10px 0;
        gap: 6px;
        border-top: 1px solid #f0f0f0;
        font-size: 12px;
      }

      .worker-order-prices > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .worker-order-prices strong {
        color: #111;
        font-size: 12px;
        font-weight: 650;
      }

      .worker-order-prices span {
        color: #111;
        font-weight: 600;
        text-align: right;
        white-space: nowrap;
      }

      .worker-order-actions {
        display: flex;
        padding: 8px 0 0;
        justify-content: flex-end;
      }

      .worker-order-send {
        min-height: 31px;
        padding: 0 13px;
        border: 0;
        border-radius: 99px;
        background: #0a703e;
        color: #fff;
        font-size: 11px;
        font-weight: 650;
      }

      .worker-order-send:hover {
        background: #16a34a;
      }

      .worker-rating-backdrop {
        position: fixed;
        z-index: 10;
        inset: 0;
        display: grid;
        padding: 20px;
        place-items: center;
        background: #00000073;
        backdrop-filter: blur(2px);
      }

      .worker-rating-dialog {
        width: min(100%, 420px);
        padding: 23px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 10px 34px #00000030;
        text-align: center;
      }

      .worker-rating-dialog h2 {
        margin: 0;
        color: #303740;
        font-size: 18px;
      }

      .worker-rating-dialog > p {
        margin: 9px 0 15px;
        color: #697586;
        font-size: 13px;
      }

      .worker-rating-stars {
        display: flex;
        margin-bottom: 12px;
        justify-content: center;
        gap: 7px;
      }

      .worker-rating-stars button {
        padding: 0;
        border: 0;
        background: transparent;
        color: #d6d9dd;
        font-size: 30px;
        line-height: 1;
      }

      .worker-rating-stars button.selected {
        color: #f3b719;
      }

      .worker-rating-dialog .worker-rating-warning {
        margin: 0 0 11px;
        color: #b42318;
        font-size: 12px;
      }

      .worker-rating-review-label {
        display: block;
        margin: 0 0 6px;
        color: #374151;
        font-size: 12px;
        font-weight: 650;
        text-align: left;
      }

      .worker-rating-review {
        width: 100%;
        min-height: 92px;
        margin: 0 0 12px;
        padding: 10px;
        border: 1px solid #d6dce4;
        border-radius: 9px;
        color: #303740;
        font: inherit;
        font-size: 13px;
        resize: vertical;
        text-align: left;
      }

      .worker-order-review {
        margin: 0;
        color: #556171;
        font-size: 12px;
        line-height: 1.5;
        overflow-wrap: anywhere;
      }

      .worker-rating-submit,
      .worker-rating-cancel {
        width: 100%;
        min-height: 40px;
        border: 0;
        border-radius: 9px;
        font-size: 13px;
        font-weight: 650;
      }

      .worker-rating-submit {
        margin-bottom: 8px;
        background: #0a703e;
        color: #fff;
      }

      .worker-rating-cancel {
        background: #e8eaed;
        color: #333;
      }

      .worker-task-card,
      .worker-order-card {
        display: flex;
        min-height: 78px;
        align-items: center;
        gap: 14px;
      }

      .worker-task-card > div,
      .worker-order-card > div {
        flex: 1;
        min-width: 0;
      }

      .worker-task-card p,
      .worker-order-card p {
        margin: 5px 0 0;
        color: #738094;
        font-size: 13px;
      }

      .worker-task-icon,
      .worker-profile-avatar {
        display: grid;
        width: 45px;
        height: 45px;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 50%;
        background: #e9f8ef;
        color: #19a957;
      }

      .worker-task-icon svg,
      .worker-profile-avatar svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
      }

      .worker-task-button.started {
        background: #e8f6ed;
        color: #178746;
      }

      .worker-order-status {
        display: inline-block;
        margin-top: 7px;
        color: #178746;
        font-size: 12px;
      }

      .worker-empty-state {
        display: grid;
        min-height: 250px;
        padding: 25px;
        place-content: center;
        justify-items: center;
        border: 1px dashed #d6dce2;
        border-radius: 12px;
        background: #fff;
        color: #738094;
        text-align: center;
      }

      .worker-empty-state h2 {
        margin: 9px 0 0;
        color: #27313c;
        font-size: 18px;
      }

      .worker-empty-state p {
        margin: 7px 0 18px;
        font-size: 13px;
      }

      .worker-empty-icon {
        font-size: 28px;
      }

      .worker-profile-card {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .worker-profile-avatar {
        width: 56px;
        height: 56px;
      }

      .worker-profile-card h2 {
        margin: 0;
        color: #27313c;
        font-size: 18px;
      }

      .worker-profile-card p {
        margin: 5px 0 0;
        color: #738094;
        font-size: 13px;
      }

      .worker-profile-menu {
        margin-top: 14px;
        padding: 0 17px;
      }

      .worker-profile-menu button,
      .worker-profile-menu a,
      .worker-profile-menu button > span,
      .worker-profile-menu a > span {
        display: flex;
        align-items: center;
      }

      .worker-profile-menu button {
        min-height: 59px;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        border-bottom: 1px solid #edf0f2;
        background: #fff;
        color: #28323d;
        font-size: 14px;
        text-align: left;
      }

      .worker-profile-menu a {
        min-height: 59px;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        border-bottom: 1px solid #edf0f2;
        background: #fff;
        color: #28323d;
        font-size: 14px;
        text-align: left;
        text-decoration: none;
      }

      .worker-profile-menu button:last-child,
      .worker-profile-menu a:last-child {
        border-bottom: 0;
      }

      .worker-profile-menu button > span:first-child,
      .worker-profile-menu a > span:first-child {
        gap: 10px;
      }

      .worker-profile-menu button svg,
      .worker-profile-menu a svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: #65717e;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
      }

      .worker-profile-menu-detail {
        gap: 9px;
        color: #87919d;
        font-size: 12px;
      }

      .worker-profile-menu-detail b {
        color: #87919d;
        font-size: 22px;
        font-weight: 400;
      }

      .worker-profile-page {
        width: 100%;
        padding-bottom: 20px;
      }

      .worker-profile-banner {
        position: relative;
        width: 100vw;
        min-height: 165px;
        margin-left: calc(50% - 50vw);
        padding: 26px max(20px, calc((100vw - 1180px) / 2));
        overflow: hidden;
        border-radius: 0 0 24px 24px;
        background: linear-gradient(125deg, #0a703e, #16a34a);
        color: #fff;
      }

      .worker-profile-banner::before,
      .worker-profile-banner::after {
        position: absolute;
        border-radius: 50%;
        background: #ffffff12;
        content: "";
        pointer-events: none;
      }

      .worker-profile-banner::before {
        top: -80px;
        right: -80px;
        width: 220px;
        height: 220px;
      }

      .worker-profile-banner::after {
        bottom: -40px;
        left: -40px;
        width: 140px;
        height: 140px;
        background: #ffffff0d;
      }

      .worker-profile-banner-content {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .worker-profile-banner .worker-profile-avatar {
        width: 66px;
        height: 66px;
        background: #fff;
        color: #16a34a;
      }

      .worker-profile-banner .worker-profile-avatar svg {
        width: 34px;
        height: 34px;
        fill: currentColor;
        stroke: currentColor;
      }

      .worker-profile-identity {
        min-width: 0;
      }

      .worker-profile-name-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
      }

      .worker-profile-name-row h1 {
        margin: 0;
        color: #fff;
        font-size: 21px;
        font-weight: 750;
        line-height: 1.2;
        overflow-wrap: anywhere;
      }

      .worker-profile-name-row > span {
        padding: 4px 9px;
        border: 1px solid #ffffff33;
        border-radius: 99px;
        background: #ffffff26;
        color: #fff;
        font-size: 10px;
        font-weight: 650;
      }

      .worker-profile-identity > p {
        margin: 8px 0 0;
        color: #fff;
        font-size: 12px;
        opacity: 0.95;
      }

      .worker-profile-main {
        position: relative;
        z-index: 2;
        width: min(100% - 40px, 1180px);
        margin: -46px auto 0;
        padding-bottom: 10px;
      }

      .worker-profile-total {
        display: grid;
        min-height: 93px;
        padding: 16px;
        align-content: center;
        gap: 5px;
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 7px 20px #00000012;
      }

      .worker-profile-total > span {
        color: #858b93;
        font-size: 12px;
      }

      .worker-profile-total > strong {
        color: #15191d;
        font-size: 25px;
        font-weight: 750;
      }

      .worker-profile-quick-menu {
        display: grid;
        margin-top: 13px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 9px;
      }

      .worker-profile-quick-menu button,
      .worker-profile-quick-menu a {
        display: flex;
        min-width: 0;
        min-height: 79px;
        padding: 9px 5px;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        border: 0;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 2px 8px #0000000d;
        color: #303740;
        font-size: 11px;
        font-weight: 600;
        text-decoration: none;
      }

      .worker-profile-quick-menu button:hover,
      .worker-profile-quick-menu a:hover {
        background: #f2fbf5;
      }

      .worker-profile-quick-menu svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: #16a34a;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.7;
      }

      .worker-profile-promo {
        margin-top: 13px;
        padding: 12px;
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 2px 8px #0000000d;
      }

      .worker-profile-promo-banner {
        display: flex;
        width: 100%;
        min-height: 76px;
        padding: 10px 12px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid #bbf7d0;
        border-radius: 12px;
        background: #f0fdf4;
        color: #34413a;
        text-align: left;
      }

      .worker-profile-promo-banner > span {
        display: grid;
        gap: 7px;
      }

      .worker-profile-promo-banner strong {
        width: fit-content;
        padding: 4px 9px;
        border-radius: 8px;
        background: #16a34a;
        color: #fff;
        font-size: 10px;
      }

      .worker-profile-promo-banner > span > span {
        display: grid;
        gap: 3px;
        font-size: 12px;
      }

      .worker-profile-promo-banner small {
        color: #758079;
        font-size: 10px;
      }

      .worker-profile-promo-banner > b {
        color: #65717e;
        font-size: 24px;
        font-weight: 400;
      }

      .worker-profile-promo-actions {
        display: grid;
        margin-top: 9px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .worker-profile-promo-actions button {
        min-height: 38px;
        border: 1px solid #e5e7eb;
        border-radius: 11px;
        background: #fff;
        color: #343b42;
        font-size: 12px;
        font-weight: 600;
      }

      .worker-profile-promo-actions button:hover {
        background: #f9fafb;
      }

      .worker-profile-main .worker-profile-menu {
        display: grid;
        margin-top: 13px;
        padding: 6px 10px;
        gap: 0;
        border: 0;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 2px 8px #0000000d;
      }

      .worker-profile-main .worker-profile-menu h2 {
        margin: 0;
        padding: 10px 8px 7px;
        color: #858b93;
        font-size: 12px;
        font-weight: 700;
      }

      .worker-profile-main .worker-profile-menu button {
        min-height: 46px;
        padding: 0 8px;
        border-bottom: 0;
        color: #38414a;
        font-size: 13px;
      }

      .worker-profile-main .worker-profile-menu a {
        min-height: 46px;
        padding: 0 8px;
        border-bottom: 0;
        color: #38414a;
        font-size: 13px;
      }

      .worker-profile-main .worker-profile-menu button:hover,
      .worker-profile-main .worker-profile-menu a:hover {
        background: #f8faf9;
      }

      .worker-profile-main .worker-profile-menu button > span:first-child,
      .worker-profile-main .worker-profile-menu a > span:first-child {
        gap: 10px;
      }

      .worker-profile-main .worker-profile-menu button svg,
      .worker-profile-main .worker-profile-menu a svg {
        width: 18px;
        height: 18px;
        stroke: #16a34a;
      }

      .worker-profile-main .worker-profile-menu button > b,
      .worker-profile-main .worker-profile-menu a > b {
        color: #8b949d;
        font-size: 21px;
        font-weight: 400;
      }

      .worker-profile-main .worker-profile-menu em {
        padding: 2px 7px;
        border-radius: 99px;
        background: #e9f8ef;
        color: #168944;
        font-size: 10px;
        font-style: normal;
      }

      .worker-profile-main .worker-profile-help .worker-profile-logout,
      .worker-profile-main .worker-profile-logout {
        color: #b42318;
      }

      .worker-profile-main .worker-profile-logout svg {
        stroke: #b42318;
      }

      .worker-subpage {
        min-height: 100vh;
        padding-bottom: 85px;
        background: #f5f5f5;
      }

      .worker-subpage-header {
        position: sticky;
        z-index: 4;
        top: 0;
        display: grid;
        min-height: 45px;
        grid-template-columns: 48px 1fr 48px;
        align-items: center;
        background: linear-gradient(125deg, #0a703e, #16a34a);
        color: #fff;
      }

      .worker-subpage-header h1 {
        margin: 0;
        color: inherit;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
      }

      .worker-subpage-back {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        color: #fff;
      }

      .worker-subpage-back svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
      }

      .worker-subpage-main {
        min-height: calc(100vh - 113px);
        padding-bottom: 20px;
      }

      .worker-history-empty {
        margin: 0;
        padding: 27px 12px;
        color: #65717e;
        font-size: 14px;
        text-align: center;
      }

      .worker-history-list {
        display: grid;
        padding: 12px 14px;
        gap: 12px;
      }

      .worker-history-demo-note {
        margin: 0;
        color: #738094;
        font-size: 11px;
        text-align: center;
      }

      .worker-history-card {
        display: grid;
        min-height: 90px;
        padding: 15px;
        align-content: center;
        gap: 4px;
        border-radius: 11px;
        background: #fff;
        box-shadow: 0 2px 5px #0000000b;
        color: #343a40;
        font-size: 12px;
      }

      .worker-history-card strong {
        color: #222;
        font-size: 13px;
      }

      .worker-history-status.success {
        color: #139340;
      }

      .worker-history-status.rejected {
        color: #e23e45;
      }

      .worker-password-page {
        width: min(100%, 438px);
        min-height: calc(100vh - 113px);
        margin: 0 auto;
        background: #f5f5f5;
      }

      .worker-password-tabs {
        display: grid;
        min-height: 42px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        background: #fff;
      }

      .worker-password-tabs button {
        padding: 8px 5px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: #fff;
        color: #333;
        font-size: 12px;
      }

      .worker-password-tabs button.active {
        border-bottom-color: #16a34a;
        color: #0a703e;
      }

      .worker-password-form {
        display: grid;
        padding: 17px 15px;
        gap: 11px;
      }

      .worker-password-demo-note {
        margin: 0 0 2px;
        color: #737d87;
        font-size: 11px;
        line-height: 1.45;
      }

      .worker-password-form label {
        display: grid;
        gap: 5px;
        color: #47515a;
        font-size: 12px;
      }

      .worker-password-field {
        width: 100%;
        min-height: 37px;
        padding: 8px 10px;
        border: 1px solid #d7d7d7;
        border-radius: 8px;
        background: #fff;
        outline: none;
      }

      .worker-password-field:focus {
        border-color: #16a34a;
        box-shadow: 0 0 0 3px #16a34a20;
      }

      .worker-password-submit {
        min-height: 40px;
        margin-top: 4px;
        border: 0;
        border-radius: 99px;
        background: linear-gradient(125deg, #0a703e, #16a34a);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
      }

      .worker-support-illustration {
        height: 168px;
        overflow: hidden;
        background: #eaf5f0;
      }

      .worker-support-illustration svg {
        display: block;
        width: 100%;
        height: 100%;
      }

      .worker-support-contact {
        display: flex;
        width: calc(100% - 28px);
        min-height: 43px;
        margin: 15px auto 0;
        padding: 0 14px;
        align-items: center;
        gap: 9px;
        border: 0;
        border-radius: 8px;
        background: #f0fdf4;
        color: #27313c;
        font-size: 13px;
        text-align: left;
      }

      .worker-support-contact span {
        display: grid;
        width: 21px;
        height: 21px;
        place-items: center;
        border-radius: 50%;
        background: #18b957;
        color: #fff;
        font-size: 14px;
      }

      .worker-support-hours {
        display: grid;
        padding: 15px 18px 20px;
        justify-items: center;
        gap: 4px;
        background: #fff;
        text-align: center;
      }

      .worker-support-hours strong {
        color: #252a30;
        font-size: 13px;
      }

      .worker-support-hours > span {
        color: #738094;
        font-size: 12px;
      }

      .worker-support-hours p {
        max-width: 520px;
        margin: 7px 0 0;
        color: #536073;
        font-size: 11px;
        line-height: 1.5;
      }

      .worker-transaction-page {
        display: grid;
        width: min(100% - 28px, 860px);
        margin: 0 auto;
        padding: 15px 0 25px;
        gap: 13px;
      }

      .worker-transaction-card {
        display: grid;
        padding: 16px;
        gap: 8px;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 3px 10px #0000000c;
        color: #333;
        font-size: 13px;
      }

      .worker-transaction-card h2 {
        margin: 0 0 3px;
        color: #137b44;
        font-size: 14px;
      }

      .worker-transaction-card p {
        margin: 0;
        line-height: 1.5;
      }

      .worker-transaction-balance {
        display: grid;
        min-height: 90px;
        align-content: center;
        justify-items: center;
        gap: 3px;
        border-radius: 13px;
        background: linear-gradient(125deg, #0a703e, #16a34a);
        box-shadow: 0 6px 14px #0a703e28;
        color: #fff;
      }

      .worker-transaction-balance strong {
        font-size: 23px;
      }

      .worker-transaction-balance span {
        font-size: 12px;
      }

      .worker-transaction-warning {
        padding: 9px 10px;
        border: 1px solid #f0d9a6;
        border-radius: 9px;
        background: #fffbeb;
        color: #76561c;
        font-size: 12px;
        line-height: 1.5;
      }

      .worker-transaction-primary {
        display: block;
        width: 100%;
        min-height: 41px;
        padding: 8px 14px;
        border: 0;
        border-radius: 99px;
        background: linear-gradient(125deg, #0a703e, #16a34a);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
      }

      .worker-transaction-primary:disabled {
        background: #8a938e;
        cursor: not-allowed;
      }

      .worker-transaction-form label {
        display: grid;
        gap: 6px;
        color: #137b44;
        font-size: 12px;
        font-weight: 650;
      }

      .worker-transaction-form input {
        width: 100%;
        min-height: 40px;
        padding: 8px 11px;
        border: 1px solid #d8dce1;
        border-radius: 8px;
        background: #fff;
        color: #303740;
        font: inherit;
        font-weight: 400;
      }

      .worker-transaction-form input:focus {
        border-color: #16a34a;
        outline: 3px solid #16a34a20;
      }

      .worker-transaction-amount-preview {
        color: #15994c;
        font-size: 12px;
        font-weight: 700;
      }

      .worker-transaction-notice {
        padding: 13px;
        border: 1px solid #cde8d1;
        border-radius: 10px;
        background: #f8fdf8;
        color: #356245;
        font-size: 12px;
        line-height: 1.5;
      }

      .worker-transaction-bank-card {
        display: grid;
        min-height: 145px;
        padding: 18px;
        place-content: center;
        justify-items: center;
        gap: 7px;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 5px 14px #0000000c;
        color: #343b42;
        font-size: 13px;
        text-align: center;
      }

      .worker-transaction-bank-card > span:last-child {
        color: #738094;
        font-size: 11px;
      }

      .worker-recharge-accounts {
        display: grid;
        padding: 16px;
        gap: 10px;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 3px 10px #0000000c;
      }

      .worker-recharge-accounts h2 {
        margin: 0;
        color: #137b44;
        font-size: 15px;
      }

      .worker-recharge-account {
        display: flex;
        padding: 11px;
        align-items: center;
        gap: 12px;
        border: 1px solid #e5e9ed;
        border-radius: 10px;
        background: #fbfcfd;
      }

      .worker-recharge-account > div {
        display: grid;
        min-width: 0;
        gap: 3px;
        color: #526073;
        font-size: 12px;
        overflow-wrap: anywhere;
      }

      .worker-recharge-account > div strong {
        color: #283446;
        font-size: 14px;
      }

      .worker-recharge-account > div b {
        color: #283446;
        font-weight: 700;
      }

      .worker-recharge-accounts > .worker-transaction-warning {
        margin: 0;
      }

      .worker-transaction-bank-icon {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border-radius: 50%;
        background: #e7f7ed;
      }

      .worker-transaction-bank-icon svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: #16a34a;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
      }

      .worker-store-main > .worker-section-heading + .worker-notifications-card {
        margin-bottom: 20px;
      }

      .worker-login-screen {
        display: grid;
        min-height: 100vh;
        padding: 20px;
        place-items: center;
        background: #f3f6fb;
      }

      .worker-login-card {
        width: min(100%, 506px);
        padding: 24px 32px 22px;
        border: 1px solid #edf0f4;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 12px 40px #26364b0d;
      }

      .worker-login-logo {
        display: grid;
        height: 140px;
        place-items: center;
      }

      .worker-login-logo svg {
        width: 120px;
        height: 132px;
      }

      .worker-logo-handle {
        fill: none;
        stroke: #353535;
        stroke-linecap: round;
        stroke-width: 8;
      }

      .worker-logo-bag {
        fill: #61bf50;
        stroke: #353535;
        stroke-width: 5;
      }

      .worker-logo-wing {
        fill: #82d26a;
      }

      .worker-logo-eye {
        fill: #fff;
        stroke: #353535;
        stroke-width: 4;
      }

      .worker-logo-pupil {
        fill: #353535;
      }

      .worker-logo-beak {
        fill: #ffd34e;
        stroke: #353535;
        stroke-width: 2;
      }

      .worker-login-card h1 {
        margin: 0;
        color: #172235;
        font-size: 34px;
        font-weight: 800;
        letter-spacing: -0.8px;
        text-align: center;
      }

      .worker-login-subtitle {
        max-width: 400px;
        margin: 10px auto 20px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.65;
        text-align: center;
      }

      .worker-login-fields {
        display: grid;
        gap: 15px;
      }

      .worker-login-fields > label {
        display: grid;
        gap: 7px;
        color: #172235;
        font-size: 14px;
        font-weight: 700;
      }

      .worker-field-caption {
        display: flex;
        align-items: center;
        gap: 7px;
      }

      .worker-field-caption svg {
        width: 15px;
        height: 15px;
        color: #18a957;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
      }

      .worker-login-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
      }

      .worker-login-input {
        width: 100%;
        min-height: 55px;
        padding: 12px 47px 12px 15px;
        border: 1px solid #dce4f0;
        border-radius: 14px;
        outline: none;
        background: #e8f0ff;
        color: #172235;
        font-size: 14px;
      }

      .worker-login-input:focus {
        border-color: #36c878;
        box-shadow: 0 0 0 3px #20c26324;
      }

      .worker-login-input-wrap > svg,
      .worker-password-toggle svg {
        position: absolute;
        right: 14px;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: #8b98aa;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
        pointer-events: none;
      }

      .worker-password-toggle {
        position: absolute;
        right: 8px;
        display: grid;
        width: 34px;
        height: 34px;
        padding: 0;
        place-items: center;
        border: 0;
        border-radius: 7px;
        background: transparent;
      }

      .worker-password-toggle:hover {
        background: #dce7fa;
      }

      .worker-password-toggle svg {
        position: static;
        pointer-events: none;
      }

      .worker-password-toggle:focus-visible,
      .worker-register-prompt button:focus-visible,
      .worker-login-terms button:focus-visible {
        outline: 3px solid #36c878;
        outline-offset: 2px;
      }

      .worker-login-submit {
        display: flex;
        min-height: 54px;
        margin-top: 7px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 0;
        border-radius: 13px;
        background: linear-gradient(180deg, #22c55e, #16a34a);
        color: #fff;
        font-size: 15px;
        font-weight: 750;
        cursor: pointer;
        transition: filter 120ms ease;
      }

      .worker-login-submit svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
      }

      .worker-login-submit:hover {
        filter: brightness(0.96);
      }

      .worker-register-prompt {
        margin: 22px 0 0;
        color: var(--muted);
        font-size: 14px;
        text-align: center;
      }

      .worker-register-prompt button,
      .worker-login-terms button {
        padding: 0;
        border: 0;
        background: transparent;
        color: #15994c;
        font: inherit;
        font-weight: 750;
        cursor: pointer;
      }

      .worker-login-terms {
        margin: 24px 0 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
        text-align: center;
      }

      .worker-login-demo {
        margin: 12px 0 0;
        color: #8490a1;
        font-size: 11px;
        text-align: center;
      }

      .worker-register-screen {
        padding: 18px;
      }

      .worker-register-card {
        width: min(100%, 420px);
        padding: 20px 23px 18px;
        border: 1px solid #edf0f4;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 12px 40px #26364b0d;
      }

      .worker-register-logo {
        display: grid;
        width: 54px;
        height: 42px;
        margin: 0 auto 2px;
        place-items: center;
      }

      .worker-register-logo svg {
        width: 42px;
        height: 42px;
      }

      .worker-register-card h1 {
        margin: 0;
        color: #172235;
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -0.5px;
        text-align: center;
      }

      .worker-register-subtitle {
        margin: 6px 0 18px;
        color: #7b8799;
        font-size: 11px;
        line-height: 1.45;
        text-align: center;
      }

      .worker-register-fields {
        display: grid;
        gap: 10px;
      }

      .worker-register-fields > label:not(.worker-register-consent) {
        display: grid;
        gap: 4px;
        color: #172235;
        font-size: 11px;
        font-weight: 700;
      }

      .worker-register-fields .worker-field-caption {
        gap: 5px;
        font-size: 11px;
      }

      .worker-register-input {
        width: 100%;
        min-height: 36px;
        padding: 8px 11px;
        border: 1px solid #d7dfeb;
        border-radius: 8px;
        outline: none;
        background: #fff;
        color: #172235;
        font-size: 11px;
        font-weight: 400;
      }

      .worker-register-input::placeholder {
        color: #9aa5b5;
      }

      .worker-register-input:focus {
        border-color: #36c878;
        box-shadow: 0 0 0 3px #20c26320;
      }

      .worker-register-password-wrap {
        position: relative;
        display: flex;
        align-items: center;
      }

      .worker-register-password-wrap .worker-register-input {
        padding-right: 41px;
      }

      .worker-register-password-wrap .worker-password-toggle {
        right: 3px;
      }

      .worker-register-password-wrap .worker-password-toggle svg {
        width: 15px;
        height: 15px;
      }

      .worker-register-security {
        display: grid;
        padding: 10px 11px;
        gap: 4px;
        border: 1px solid #a6efc0;
        border-radius: 9px;
        background: #effdf4;
        color: #24623b;
        font-size: 10px;
        line-height: 1.45;
      }

      .worker-register-security strong {
        color: #157a3c;
        font-size: 11px;
      }

      .worker-register-security ul {
        margin: 2px 0 0;
        padding-left: 17px;
      }

      .worker-register-consent {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        color: #596579;
        font-size: 10px;
        line-height: 1.5;
      }

      .worker-register-consent input {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        margin: 1px 0 0;
        accent-color: #16a34a;
      }

      .worker-register-consent button {
        padding: 0;
        border: 0;
        background: transparent;
        color: #15994c;
        font: inherit;
        font-weight: 750;
        cursor: pointer;
      }

      .worker-register-card .worker-login-submit {
        min-height: 39px;
        margin-top: 1px;
        border-radius: 8px;
        font-size: 12px;
      }

      .worker-register-card .worker-login-submit svg {
        width: 15px;
        height: 15px;
      }

      .worker-register-card .worker-register-prompt {
        margin: 13px 0 0;
        font-size: 11px;
      }

      .worker-register-card .worker-register-prompt a {
        color: #15994c;
        font-weight: 750;
        text-decoration: none;
      }

      .worker-register-card .worker-login-demo {
        margin: 10px 0 0;
        font-size: 10px;
        line-height: 1.45;
      }

      .worker-policy-backdrop {
        z-index: 10;
        padding: 24px;
        background: #101828a6;
      }

      .worker-policy-modal {
        display: flex;
        width: min(100%, 820px);
        max-height: min(88vh, 760px);
        flex-direction: column;
        overflow: hidden;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 18px 60px #10182840;
      }

      .worker-policy-modal > header {
        display: flex;
        min-height: 72px;
        padding: 15px 24px;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        border-bottom: 1px solid #edf0f4;
      }

      .worker-policy-modal h2 {
        margin: 0;
        color: #172235;
        font-size: 22px;
      }

      .worker-policy-close {
        display: grid;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        place-items: center;
        border: 2px solid #16b34a;
        border-radius: 50%;
        background: #fff;
        color: #667085;
        font-size: 27px;
        line-height: 1;
      }

      .worker-policy-content {
        overflow-y: auto;
        padding: 24px 28px 30px;
      }

      .worker-policy-content section + section {
        margin-top: 24px;
      }

      .worker-policy-content h3 {
        margin: 0 0 9px;
        color: #202b3b;
        font-size: 16px;
      }

      .worker-policy-content p {
        margin: 0;
        color: #667085;
        font-size: 15px;
        line-height: 1.65;
      }

      .settings-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }

      .settings-card {
        padding: 16px;
        border-radius: 9px;
        background: #fff;
        box-shadow: var(--card-shadow);
      }

      .settings-tabs {
        display: flex;
        margin-bottom: 10px;
        gap: 4px;
        border-bottom: 1px solid #e1e5eb;
      }

      .settings-tab {
        min-width: 86px;
        padding: 8px 13px 9px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #526075;
        font-size: 13px;
      }

      .settings-tab.active {
        border-bottom-color: var(--blue);
        color: var(--blue);
        font-weight: 700;
      }

      .settings-add-account {
        min-height: 34px;
        margin: 0 0 6px;
        padding: 7px 12px;
        font-size: 12px;
      }

      .settings-account-table-wrap {
        width: 100%;
        overflow-x: auto;
        border: 1px solid #e2e5eb;
        border-radius: 7px;
      }

      .settings-account-table {
        width: 100%;
        min-width: 650px;
        border-collapse: collapse;
        font-size: 12px;
        text-align: left;
      }

      .settings-account-table th,
      .settings-account-table td {
        padding: 8px 11px;
        border-bottom: 1px solid #e5e8ed;
      }

      .settings-account-table th {
        background: #f1f2f5;
        color: #273448;
        font-weight: 700;
      }

      .settings-account-table th:last-child,
      .settings-account-table td:last-child {
        width: 105px;
        text-align: center;
      }

      .settings-account-table tbody tr:last-child td {
        border-bottom: 0;
      }

      .settings-account-table .account-action {
        min-width: 55px;
      }

      .settings-account-table .empty-state {
        padding: 18px 12px;
        text-align: center;
      }

      .settings-account-note {
        margin: 9px 1px 0;
        color: var(--muted);
        font-size: 11px;
      }

      .settings-save {
        padding: 17px;
      }

      .settings-form-shell {
        display: flex;
        justify-content: center;
      }

      .settings-account-form-card {
        width: min(100%, 526px);
        padding: 21px 22px;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 5px #1018281a, 0 5px 9px #1018280d;
      }

      .settings-account-form-card h1 {
        margin: 0 0 22px;
        font-size: 21px;
      }

      .settings-account-form-card form {
        display: grid;
        gap: 17px;
      }

      .settings-account-form-card label {
        display: grid;
        gap: 7px;
        color: #39475d;
        font-size: 14px;
      }

      .settings-account-form-card .field-input {
        width: 100%;
        min-height: 39px;
        padding: 9px 12px;
        border-color: #d5dbe4;
        border-radius: 5px;
        font-size: 14px;
      }

      .settings-account-form-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .settings-account-form-actions .button {
        min-height: 37px;
        padding: 8px 15px;
      }

      .setting-row {
        display: flex;
        padding: 17px;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        border-bottom: 1px solid var(--border);
      }

      .setting-row:last-child {
        border-bottom: 0;
      }

      .setting-row strong {
        display: block;
        margin-bottom: 4px;
      }

      .setting-row small {
        color: var(--muted);
      }

      .switch {
        width: 45px;
        height: 26px;
        flex: 0 0 45px;
        appearance: none;
        border-radius: 99px;
        background: #c8ced8;
        cursor: pointer;
        position: relative;
        transition: background 150ms ease;
      }

      .switch::after {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: white;
        content: "";
        transition: transform 150ms ease;
      }

      .switch:checked {
        background: var(--blue);
      }

      .switch:checked::after {
        transform: translateX(19px);
      }

      .toast {
        position: fixed;
        z-index: 5;
        right: 22px;
        bottom: 22px;
        max-width: calc(100vw - 44px);
        padding: 13px 17px;
        border-radius: 10px;
        background: #202a39;
        color: #fff;
        box-shadow: 0 8px 30px #10182835;
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px);
        transition:
          opacity 140ms ease,
          transform 140ms ease;
      }

      .toast.visible {
        opacity: 1;
        transform: translateY(0);
      }

      .modal-backdrop {
        position: fixed;
        z-index: 4;
        inset: 0;
        display: grid;
        padding: 20px;
        place-items: center;
        background: #10182880;
      }

      .modal {
        width: min(100%, 480px);
        max-height: min(90vh, 760px);
        overflow-y: auto;
        padding: 24px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 22px 70px #10182855;
      }

      .modal h2 {
        margin: 0 0 18px;
      }

      .modal-form {
        display: grid;
        gap: 14px;
      }

      .modal-form label {
        display: grid;
        gap: 6px;
        color: #48566c;
        font-size: 13px;
        font-weight: 650;
      }

      .field-textarea {
        min-height: 88px;
        resize: vertical;
      }

      .modal-actions {
        display: flex;
        margin-top: 6px;
        justify-content: end;
        gap: 9px;
      }

      .login-screen {
        position: relative;
        isolation: isolate;
        display: grid;
        min-height: 100vh;
        padding: 20px;
        place-items: center;
        overflow: hidden;
        background: #041426;
      }

      .admin-login-ambient {
        position: absolute;
        z-index: -1;
        inset: 0;
        overflow: hidden;
        background:
          radial-gradient(ellipse at 50% 110%, #075e8270, transparent 54%),
          linear-gradient(135deg, #03101f, #061c36 52%, #031321);
      }

      .admin-login-grid {
        position: absolute;
        inset: -50%;
        opacity: 0.2;
        background-image:
          linear-gradient(#15c7f212 1px, transparent 1px),
          linear-gradient(90deg, #15c7f212 1px, transparent 1px);
        background-size: 54px 54px;
        transform: perspective(500px) rotateX(58deg) translateY(24%);
        animation: admin-grid-drift 24s linear infinite;
      }

      .admin-login-orb {
        position: absolute;
        display: block;
        width: min(48vw, 520px);
        aspect-ratio: 1;
        border: 1px solid #16d9f22b;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 50%, #00c6f21c, #00c6f205 48%, transparent 70%);
        box-shadow: inset 0 0 75px #00c6f20c, 0 0 80px #00c6f20b;
        animation: admin-orb-float 14s ease-in-out infinite alternate;
      }

      .admin-login-orb::before,
      .admin-login-orb::after {
        position: absolute;
        border: 1px solid #27d7ee1c;
        border-radius: 50%;
        content: "";
      }

      .admin-login-orb::before {
        inset: 12%;
      }

      .admin-login-orb::after {
        inset: 25%;
      }

      .admin-login-orb.orb-one {
        top: -28%;
        left: -13%;
      }

      .admin-login-orb.orb-two {
        right: -19%;
        bottom: -42%;
        width: min(60vw, 680px);
        animation-delay: -5s;
        animation-duration: 19s;
      }

      .admin-login-orb.orb-three {
        top: 21%;
        right: 17%;
        width: min(20vw, 220px);
        opacity: 0.55;
        animation-delay: -8s;
        animation-duration: 17s;
      }

      @keyframes admin-grid-drift {
        from { background-position: 0 0, 0 0; }
        to { background-position: 0 108px, 108px 0; }
      }

      @keyframes admin-orb-float {
        from { transform: translate3d(-12px, 8px, 0) scale(0.98); }
        to { transform: translate3d(24px, -22px, 0) scale(1.04); }
      }

      .login-card {
        position: relative;
        z-index: 1;
        width: min(100%, 410px);
        padding: 34px 36px 25px;
        border: 1px solid #00d9f260;
        border-radius: 20px;
        background: linear-gradient(155deg, #071d35f2, #041326f5);
        box-shadow: 0 25px 90px #0008, inset 0 1px #ffffff0c, 0 0 35px #00d9f21a;
        color: #f4fbff;
        backdrop-filter: blur(14px);
      }

      .admin-login-mark {
        display: grid;
        width: 52px;
        height: 52px;
        margin: 0 auto 17px;
        place-items: center;
        border: 1px solid #13d9ed7a;
        border-radius: 16px;
        background: #05bed91c;
        color: #e8fcff;
        font-size: 24px;
        font-weight: 800;
        box-shadow: 0 0 25px #00d9f226;
      }

      .admin-login-mark span {
        color: #08d4ed;
      }

      .admin-login-eyebrow {
        margin: 0 0 8px !important;
        color: #30d9ec !important;
        font-size: 10px !important;
        font-weight: 750;
        letter-spacing: 2px;
        text-align: center;
      }

      .login-card h1 {
        margin: 0;
        color: #f4fbff;
        font-size: 27px;
        text-align: center;
      }

      .admin-login-subtitle {
        margin: 9px 0 27px;
        color: #9bb4c9;
        font-size: 13px;
        line-height: 1.5;
        text-align: center;
      }

      .login-card > label {
        display: block;
        margin: 0 0 7px;
        color: #c8d9e8;
        font-size: 12px;
        font-weight: 650;
      }

      .admin-login-input {
        width: 100%;
        height: 46px;
        margin-bottom: 18px;
        padding: 0 14px;
        border: 1px solid #16476a;
        border-radius: 10px;
        outline: none;
        background: #071d35;
        color: #f4fbff;
        font-size: 13px;
        transition: border-color 150ms ease, box-shadow 150ms ease;
      }

      .admin-login-input::placeholder {
        color: #69839c;
      }

      .admin-login-input:focus {
        border-color: #05d7eb;
        box-shadow: 0 0 0 3px #05d7eb20;
      }

      .admin-login-password {
        position: relative;
      }

      .admin-login-password .admin-login-input {
        padding-right: 48px;
      }

      .admin-login-password button {
        position: absolute;
        top: 4px;
        right: 5px;
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: #86a4bd;
      }

      .admin-login-password button:hover {
        background: #ffffff0d;
        color: #24d5e9;
      }

      .admin-login-password svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
      }

      .admin-login-submit {
        display: flex;
        width: 100%;
        min-height: 47px;
        margin-top: 1px;
        padding: 10px 15px;
        align-items: center;
        justify-content: center;
        gap: 12px;
        border: 0;
        border-radius: 10px;
        background: linear-gradient(100deg, #08dce5, #08a9f4);
        color: #03182b;
        font-size: 14px;
        font-weight: 750;
        box-shadow: 0 8px 24px #00c8ec29;
        transition: filter 140ms ease, transform 140ms ease;
      }

      .admin-login-submit:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
      }

      .admin-login-submit span {
        font-size: 19px;
        line-height: 1;
      }

      .admin-login-note {
        margin: 17px 0 0;
        color: #7691aa;
        font-size: 10px;
        text-align: center;
      }

      @media (prefers-reduced-motion: reduce) {
        .admin-login-grid,
        .admin-login-orb {
          animation: none;
        }
      }

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

      @media (max-width: 1100px) {
        .stats-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 15px;
          margin-bottom: 25px;
        }

        .nav {
          min-height: 66px;
          padding: 0 15px;
        }
      }

      @media (max-width: 700px) {
        .staff-card {
          padding: 8px;
        }

        .staff-modal {
          padding: 18px 16px;
        }

        body[data-page="produk"] .app {
          width: min(100% - 22px, 1152px);
        }

        body[data-page="pengaturan"] .app {
          width: min(100% - 22px, 1152px);
        }

        .settings-card {
          padding: 11px;
        }

        .settings-account-form-card {
          padding: 19px 17px;
        }

        .product-card {
          padding: 8px;
        }

        .product-modal {
          padding: 15px;
        }

        .product-modal form {
          grid-template-columns: 1fr;
        }

        .product-image-preview {
          height: 88px;
        }

        .product-form-actions .button {
          flex: 1;
        }

        .task-product-screen {
          padding: 17px 13px;
        }

        .task-product-heading {
          grid-template-columns: 1fr auto;
        }

        .task-product-heading h1 {
          grid-column: 1 / -1;
          grid-row: 1;
          margin-bottom: 5px;
          font-size: 18px;
        }

        .task-product-heading .demo-badge {
          display: none;
        }

        .task-product-filter {
          justify-content: stretch;
        }

        .task-product-filter .control {
          min-width: 0;
          width: 100%;
        }

        .commission-filter {
          align-items: stretch;
          flex-wrap: wrap;
        }

        .commission-filter .control {
          flex: 1;
          min-width: 150px;
        }

        .commission-demo-note {
          width: 100%;
          margin-left: 0;
        }

        .worker-storefront {
          padding-bottom: 78px;
        }

        .worker-profile-main {
          width: calc(100% - 24px);
        }

        .worker-profile-banner {
          min-height: 150px;
          padding-right: 16px;
          padding-left: 16px;
        }

        .worker-profile-banner .worker-profile-avatar {
          width: 58px;
          height: 58px;
        }

        .worker-profile-name-row h1 {
          font-size: 19px;
        }

        .worker-profile-total {
          min-height: 86px;
          padding: 14px;
        }

        .worker-profile-total > strong {
          font-size: 23px;
        }

        .worker-profile-quick-menu {
          gap: 7px;
        }

        .worker-profile-quick-menu button {
          min-height: 72px;
          font-size: 10px;
        }

        .worker-profile-promo {
          padding: 10px;
        }

        .worker-profile-main .worker-profile-menu {
          padding-right: 8px;
          padding-left: 8px;
        }

        .worker-store-header {
          height: 56px;
          padding: 0 14px;
        }

        .worker-brand {
          font-size: 18px;
        }

        .worker-store-main {
          width: min(100% - 24px, 600px);
          min-height: calc(100vh - 134px);
        }

        .worker-home-ticker {
          height: 105px;
          font-size: 12px;
        }

        .worker-product-grid {
          grid-template-columns: 1fr;
          gap: 14px;
        }

        .worker-product-art {
          aspect-ratio: 1.45;
        }

        .worker-bottom-nav {
          min-height: 64px;
        }

        .worker-bottom-link {
          font-size: 11px;
        }

        .worker-section-heading {
          margin-top: 23px;
          align-items: flex-start;
        }

        .worker-task-card,
        .worker-order-card {
          padding: 13px;
          gap: 10px;
        }

        .worker-task-card h2,
        .worker-order-card h2 {
          font-size: 14px;
        }

        .worker-task-button,
        .worker-order-submit {
          min-height: 34px;
          padding: 0 11px;
          font-size: 12px;
        }

        .app {
          width: min(100% - 28px, 1388px);
          padding-top: 27px;
        }

        body[data-page="anggota"] .app {
          width: min(100% - 20px, 1152px);
          padding-top: 7px;
        }

        .modal.member-action-modal {
          padding: 19px;
        }

        .member-action-layout {
          grid-template-columns: minmax(0, 1fr);
          gap: 15px;
        }

        .member-action-tabs {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .member-action-tab {
          padding: 9px 11px;
          font-size: 13px;
        }

        .member-action-content {
          padding-top: 0;
        }

        .worker-app {
          width: min(100% - 28px, 1050px);
        }

        .worker-login-card {
          padding: 26px 22px 22px;
        }

        .worker-login-logo {
          height: 125px;
        }

        .worker-login-card h1 {
          font-size: 29px;
        }

        .worker-nav-title {
          display: none;
        }

        .page-heading {
          align-items: flex-start;
          flex-direction: column;
        }

        .stats-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
        }

        .stat-card {
          min-height: 96px;
          padding: 17px;
          border-radius: 15px;
        }

        .stat-label {
          font-size: 12px;
        }

        .stat-value {
          font-size: 23px;
        }

        .panels-grid,
        .dashboard-extra,
        .settings-grid {
          grid-template-columns: 1fr;
          gap: 14px;
        }

        .panel {
          min-height: 110px;
        }

        .table-heading {
          align-items: flex-start;
          flex-direction: column;
        }

        .table-tools {
          width: 100%;
        }

        .search-input {
          flex: 1;
          min-width: 0;
        }
      }

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

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) {
        --nav: #030b19;
        --blue: #06c9ed;
        --green: #14c8d8;
        --yellow: #e8b936;
        --muted: #91a9c1;
        --border: #153451;
        --card-shadow: 0 12px 35px #0005, 0 0 20px #00c8ed0d;
        color: #e2f2ff;
        background:
          radial-gradient(ellipse at 50% 105%, #00558148, transparent 46%),
          radial-gradient(ellipse at 4% 18%, #0575a01c, transparent 32%),
          repeating-linear-gradient(135deg, #13395b12 0 1px, transparent 1px 48px),
          #040c1a;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .topbar {
        border-bottom: 1px solid #00c9ed50;
        background: linear-gradient(90deg, #020916f5, #071b31f5 52%, #020916f5);
        box-shadow: 0 4px 22px #00bce51c;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .nav-link {
        color: #bbd4e8;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .nav-link:hover,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .nav-link.active {
        background: linear-gradient(135deg, #08799a, #05b9d7);
        color: #031322;
        box-shadow: 0 0 18px #00c9ed45;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .page-heading h1,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .panel-header h2,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .table-heading h2 {
        color: #e8f6ff;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .page-heading p,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .stat-label,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .account-demo-note {
        color: #91a9c1;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(
        .stat-card,
        .panel,
        .data-card,
        .commission-report,
        .task-admin-card,
        .deposit-card,
        .withdrawal-card,
        .account-card,
        .activity-card,
        .product-card,
        .staff-card,
        .members-card,
        .account-edit-page,
        .settings-card,
        .settings-account-form-card,
        .task-product-screen,
        .chart-panel,
        .leader-panel
      ) {
        border-color: #125072;
        background: linear-gradient(145deg, #071a30f5, #061426f7 70%, #071a2bf5);
        box-shadow: 0 12px 35px #0005, inset 0 1px #51dff20b, 0 0 18px #00c9ed12;
        color: #dceeff;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .panel-title {
        filter: brightness(1.3);
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(
        .table-wrap,
        .task-admin-table-wrap,
        .task-product-table-wrap,
        .deposit-table-wrap,
        .withdrawal-table-wrap,
        .account-table-wrap,
        .activity-table-wrap,
        .product-table-wrap,
        .staff-table-wrap,
        .settings-account-table-wrap,
        .commission-table-wrap
      ) {
        border-color: #174568;
        background: #061426;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) table {
        color: #c7dcef;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) table th {
        border-color: #164564;
        background: linear-gradient(100deg, #0b2944, #0a2139);
        color: #bceeff;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) table td {
        border-color: #122f4a;
        color: #c2d5e8;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) table tbody tr:nth-child(odd) {
        background: #0a1d32;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) table tbody tr:nth-child(even) {
        background: #07172a;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(
        .control,
        .search-input,
        .field-input,
        .field-select,
        .field-textarea,
        .member-level,
        .member-credit-score,
        .task-product-filter .control,
        .task-admin-filter select
      ) {
        border-color: #1a496c;
        outline-color: transparent;
        background-color: #06172a;
        color: #e0f1ff;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(
        .control,
        .search-input,
        .field-input,
        .field-select,
        .field-textarea,
        .member-level,
        .member-credit-score
      ):focus {
        border-color: #09c9eb;
        box-shadow: 0 0 0 3px #08c7e52b;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(
        .control,
        .search-input,
        .field-input,
        .field-select,
        .field-textarea
      )::placeholder {
        color: #7892ab;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .button.outline {
        border-color: #1b5577;
        background: #09213a;
        color: #bceaff;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .button.primary,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .button.graph {
        background: linear-gradient(110deg, #06d5e5, #078fe6);
        color: #031523;
        box-shadow: 0 5px 16px #00c7ec2e;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .button:not(.primary):not(.graph):not(.green):not(.yellow):not(.outline) {
        border: 1px solid #164767;
        background: #0a223a;
        color: #cde7f7;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(.account-action.edit, .withdrawal-action.confirm) {
        border: 1px solid #806626;
        background: #302913;
        color: #f2d77d;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(.account-action.delete, .withdrawal-action.reject, .table-action.danger, .deposit-action.reject) {
        border: 1px solid #773b4b;
        background: #321925;
        color: #ff9aa9;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(.table-action, .task-detail-button) {
        border: 1px solid #155374;
        background: #0a2a43;
        color: #72e6f3;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(.deposit-action.confirm, .task-assign-button, .task-pick-product) {
        border: 1px solid #087d75;
        background: #063b3d;
        color: #64f1d1;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(.status, .deposit-status, .withdrawal-status, .task-status) {
        filter: saturate(0.9) brightness(1.15);
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(.status.pending, .deposit-status.pending, .withdrawal-status.pending) {
        border: 1px solid #806626;
        background: #302913;
        color: #f2d77d;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(.status.rejected, .status.inactive, .deposit-status.rejected, .withdrawal-status.rejected) {
        border: 1px solid #773b4b;
        background: #321925;
        color: #ff9aa9;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(.status, .deposit-status, .withdrawal-status):not(.pending):not(.rejected):not(.inactive) {
        border: 1px solid #087d75;
        background: #063b3d;
        color: #64f1d1;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .deposit-proof {
        border-color: #1a5578;
        background: linear-gradient(145deg, #0b2943, #071a2d);
        color: #7ce4f2;
        box-shadow: inset 0 1px #55dff21a, 0 0 15px #00c9ed12;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .commission-pagination button {
        border-color: #1a496b;
        background: #081c30;
        color: #b9d4e8;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .leader-rank {
        border: 1px solid #17617e;
        background: #082d43;
        color: #63e4f5;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .product-thumb {
        border-color: #1a496b;
        background: #081c30;
        color: #83cde0;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) ::-webkit-scrollbar-track {
        background: #061426;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) ::-webkit-scrollbar-thumb {
        border: 2px solid #061426;
        border-radius: 99px;
        background: #1a5577;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .demo-badge {
        border-color: #735b2d;
        background: #302714;
        color: #f2d78b;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .leader-item,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .task-product-card,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .product-image-preview {
        border-color: #164465;
        background-color: #081c30;
        color: #dceeff;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .leader-name,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .leader-score,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .commission-total,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .commission-total strong {
        color: #cce6fa;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .commission-filter,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .table-heading,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .settings-tabs {
        border-color: #17405d;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .settings-tab {
        color: #9db6cc;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .settings-tab.active {
        border-bottom-color: #08cce9;
        color: #51dff2;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .setting-row {
        border-color: #17405d;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .setting-row small,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .setting-row strong {
        color: #c4d9ec;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .modal {
        border: 1px solid #137096;
        background: linear-gradient(145deg, #081d33, #061426);
        color: #e1f1ff;
        box-shadow: 0 22px 70px #0009, 0 0 28px #00bfe51c;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .modal h2 {
        color: #ecf8ff;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) :is(.modal-form label, .account-edit-page form > label) {
        color: #b9cfe1;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .toast {
        border: 1px solid #147295;
        background: #071a2d;
        color: #e7f8ff;
        box-shadow: 0 8px 30px #0008, 0 0 20px #00c9ed24;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .empty-state {
        color: #8da9c2;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .admin-login-ambient {
        background:
          radial-gradient(ellipse at 50% 110%, #075e8270, transparent 54%),
          linear-gradient(135deg, #03101f, #061c36 52%, #031321);
      }

      .dashboard-history {
        grid-column: 1 / -1;
        min-width: 0;
      }

      .dashboard-history-heading {
        align-items: flex-start;
        gap: 20px;
      }

      .dashboard-history-heading h2 {
        margin: 0;
      }

      .dashboard-history-heading p {
        margin: 7px 0 0;
        color: var(--muted);
        font-size: 13px;
      }

      .dashboard-period-controls {
        display: grid;
        justify-items: end;
        gap: 10px;
      }

      .dashboard-period-switcher,
      .dashboard-date-controls {
        display: flex;
        align-items: center;
        gap: 7px;
      }

      .dashboard-date-controls .control {
        min-width: 160px;
      }

      .dashboard-date-step {
        min-width: 40px;
        padding: 8px 12px;
        font-size: 20px;
        line-height: 1;
      }

      .dashboard-history-totals {
        display: grid;
        margin: 8px 0 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .dashboard-history-totals article {
        display: grid;
        min-height: 84px;
        padding: 16px 18px;
        align-content: center;
        gap: 8px;
        border: 1px solid #e7e9ee;
        border-radius: 12px;
        background: #f8fafc;
      }

      .dashboard-history-totals span {
        color: var(--muted);
        font-size: 13px;
      }

      .dashboard-history-totals strong {
        color: #2563eb;
        font-size: 20px;
      }

      .dashboard-history-totals article:last-child strong {
        color: #e32929;
      }

      .dashboard-history-table-wrap {
        width: 100%;
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: 10px;
      }

      .dashboard-history-table {
        width: 100%;
        min-width: 620px;
        border-collapse: collapse;
      }

      .dashboard-history-table th,
      .dashboard-history-table td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        text-align: left;
        white-space: nowrap;
      }

      .dashboard-history-table th {
        background: #f3f6fa;
        color: #536278;
        font-size: 12px;
      }

      .dashboard-history-table tbody tr:last-child td {
        border-bottom: 0;
      }

      .dashboard-history-status {
        display: inline-flex;
        padding: 4px 9px;
        border: 1px solid #dce6f1;
        border-radius: 999px;
        background: #f4f8fc;
        color: #52647a;
        font-size: 12px;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .dashboard-history-heading p,
      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .dashboard-history-totals span {
        color: #91a9c1;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .dashboard-history-totals article {
        border-color: #164465;
        background: #081c30;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .dashboard-history-table-wrap {
        border-color: #174568;
        background: #061426;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .dashboard-history-table th {
        border-color: #164564;
        background: linear-gradient(100deg, #0b2944, #0a2139);
        color: #bceeff;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .dashboard-history-table td {
        border-color: #122f4a;
        color: #c2d5e8;
      }

      body:not([data-page="pekerja"]):not([data-page^="pekerja-"]) .dashboard-history-status {
        border-color: #1a496b;
        background: #0a223a;
        color: #bceaff;
      }

      @media (max-width: 700px) {
        .dashboard-history-heading {
          display: grid;
        }

        .dashboard-period-controls {
          width: 100%;
          justify-items: stretch;
        }

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

        .dashboard-date-controls {
          justify-content: space-between;
        }

        .dashboard-date-controls .control {
          flex: 1;
          min-width: 0;
        }

        .dashboard-history-totals {
          grid-template-columns: 1fr;
        }
      }