:root{
      --bg:#ffffff;
      --card:#14220f;
      --muted:#5b6470;
      --text:rgba(31, 41, 55, 1);
      --font-figma: "Cairo", "Tajawal", "Noto Sans Arabic", "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
      --border:#1f2a3a;
      --accent:#4da3ff;
      --good:#2ecc71;
      --warn:#f1c40f;
      --bad:#e74c3c;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 14px;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
    }
    *{box-sizing:border-box}
    html, body{
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
      overscroll-behavior-x: none;
    }
    @supports not (overflow: clip){
      html, body{
        overflow-x: hidden;
      }
    }
    body{
      margin:0;
      font-family: var(--font-figma);
      background: rgba(243, 244, 246, 1);
      color:var(--text);
      min-height: 100svh;
      touch-action: manipulation;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    .appShell.appBooting > *{
      visibility: hidden;
    }
    .appShell.appBooting::before{
      content: "جاري تحميل لوحة التحكم...";
      position: fixed;
      inset: 0;
      z-index: 9998;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(248, 250, 252, 0.98);
      color: #334155;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .1px;
    }
    .appShell.appBooting::after{
      content: "";
      position: fixed;
      top: calc(50% - 34px);
      left: calc(50% - 12px);
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 3px solid rgba(99, 102, 241, 0.2);
      border-top-color: #6366f1;
      animation: appBootSpin .7s linear infinite;
      z-index: 9999;
    }
    @keyframes appBootSpin{
      to{ transform: rotate(360deg); }
    }

    header{
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(10px);
      background: rgba(249, 250, 251, 1);
      border-bottom:1px solid rgba(249, 250, 251, 1);
      padding-top: var(--safe-top);
    }
    .topbar{
      max-width: 1300px;
      margin: 0 auto;
      padding: 14px 16px;
      display:flex;
      flex-wrap: wrap;
      gap:12px;
      align-items:center;
      justify-content:space-between;
      min-width: 0;
    }
    .brand{
      display:flex; gap:12px; align-items:center;
    }
    .logo{
      width: 38px; height: 38px;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(156, 163, 175, 0.55);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.14);
      display:flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 auto;
    }
    .logo img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
    }
    h1{
      margin:0;
      font-size: 16px;
      letter-spacing:.2px;
    }
    .sub{
      margin:0;
      font-size:12px;
      color:var(--muted);
    }

    .actions{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
      flex: 1 1 760px;
      min-width: 0;
    }
    .actionsQuick{
      display:inline-flex;
      align-items:center;
      gap:8px;
      flex: 0 0 auto;
      order: 40;
    }
    .headerNotifWrap{
      position: relative;
      flex: 0 0 auto;
    }
    .notifBellBtn{
      width: 42px;
      min-width: 42px;
      height: 42px;
      border-radius: 999px;
      padding: 0;
      justify-content:center;
      position: relative;
    }
    .notifBellIcon{
      font-size: 18px;
      line-height: 1;
    }
    .orderBellToggleBtn{
      position: relative;
    }
    .orderBellToggleBtn .orderBellStateDot{
      position: absolute;
      left: -2px;
      bottom: -2px;
      width: 11px;
      height: 11px;
      border-radius: 999px;
      border: 2px solid #ffffff;
      background: #22c55e;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
      pointer-events: none;
    }
    .orderBellToggleBtn .orderBellOffSlash{
      opacity: 0;
      transition: opacity 0.18s ease;
    }
    .orderBellToggleBtn.isOff .orderBellStateDot{
      background: #ef4444;
    }
    .orderBellToggleBtn.isOff .orderBellOffSlash{
      opacity: 1;
    }
    .headerNotifPanel{
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: min(460px, 92vw);
      max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 16px);
      z-index: 85;
      display: none;
      max-height: min(72dvh, 560px);
      overflow: auto;
    }
    .headerNotifWrap.open .headerNotifPanel{
      display: block;
    }
    .headerNotifPanel .tasksHead{
      margin-bottom: 8px;
    }
    .headerNotifPanel .tasksFilters{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .headerNotifPanel .tasksFilters .btn{
      min-height: 34px;
      padding: 8px 10px;
      font-size: 12px;
    }
    .burgerBtn{
      min-width: 120px;
      justify-content:center;
      font-weight: 800;
    }
    .sidebarBackdrop{
      position: fixed;
      inset: 0;
      z-index: 70;
      pointer-events: none;
    }
    .sidebarBackdrop.open{
      pointer-events: auto;
    }
    .sidebarShade{
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.35);
      opacity: 0;
      transition: opacity .2s ease;
    }
    .sidebarPanel{
      position: absolute;
      top: 0;
      right: 0;
      width: min(360px, 90vw);
      height: 100%;
      background: rgba(249, 250, 251, 0.98);
      border-left: 1px solid rgba(156, 163, 175, 0.55);
      box-shadow: -15px 0 40px rgba(15, 23, 42, 0.18);
      transform: translateX(105%);
      transition: transform .22s ease;
      display:flex;
      flex-direction:column;
      gap: 12px;
      padding: 14px 12px;
      overflow: auto;
    }
    .sidebarBackdrop.open .sidebarShade{
      opacity: 1;
    }
    .sidebarBackdrop.open .sidebarPanel{
      transform: translateX(0);
    }
    .sidebarHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      border-bottom: 1px solid rgba(156, 163, 175, 0.45);
      padding-bottom: 10px;
    }
    .sidebarTitle{
      margin:0;
      font-size: 14px;
      color: rgba(31, 41, 55, 1);
      font-weight: 900;
    }
    .sidebarSub{
      margin:0;
      color: rgba(107, 114, 128, 1);
      font-size: 11px;
      line-height: 1.5;
    }
    .sidebarNav{
      display:flex;
      flex-direction:column;
      gap: 8px;
    }
    .sidebarNav .btn{
      width: 100%;
      justify-content: flex-start;
      min-height: 42px;
      font-size: 13px;
    }
    .sidebarNav .btn.active{
      background: linear-gradient(135deg, #1d4ed8, #2563eb);
      border-color: #1d4ed8;
      color: #ffffff;
    }
    .btn{
      border:1px solid rgba(156, 163, 175, 0.55);
      background: rgba(249, 250, 251, 1);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 12px;
      cursor:pointer;
      font-weight:600;
      display:inline-flex;
      gap:10px;
      align-items:center;
      transition: transform .12s ease, border-color .12s ease;
      user-select:none;
      min-width: 0;
    }
    .btn:hover{ transform: translateY(-1px); border-color: rgba(31, 41, 55, 0.55); }
    .btn.primary{
      background: linear-gradient(135deg, rgba(46,204,113,.95), rgba(46,204,113,.7));
      border-color: rgba(46,204,113,.75);
      color: #ffffff;
    }
    .btn.linked{
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      border-color: #2563eb;
      color: #ffffff;
    }
    .btn.danger{
      background: rgba(0, 234, 255, 0.12);
      border-color: rgba(231,76,60,.45);
      color: #ffd7d2;
    }
    .btn.ghost{
      background: transparent;
    }
    .btn small{opacity:.9; font-weight:700}

    .container{
      max-width: 1300px;
      margin: 0 auto;
      padding: 16px;
    }
    .appSignature{
      max-width: 1300px;
      margin: 0 auto;
      padding: 4px 16px 18px;
      text-align: center;
      color: rgba(107, 114, 128, 1);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .2px;
    }

    .board{
      display:grid;
      grid-template-columns: repeat(4, minmax(260px, 1fr));
      gap: 14px;
      align-items:start;
    }
    @media (max-width: 1100px){
      .board{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
    }
    @media (min-width: 621px){
      .board.desktop-compact .col{
        border-radius: 10px;
        box-shadow: none;
      }
      .board.desktop-compact .colHead{
        border-bottom: 0;
        padding: 10px;
        cursor: pointer;
      }
      .board.desktop-compact .dropzone{
        display: none;
      }
      .board.desktop-compact .col.is-open .dropzone{
        display: flex;
      }
      .board.desktop-compact .col.is-open .colHead{
        border-bottom: 1px solid rgba(156, 163, 175, 0.55);
      }
    }
    @media (max-width: 620px){
      .topbar{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .brand{
        justify-content: flex-start;
      }
      .board{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
      .actions{
        width: 100%;
        justify-content: flex-start;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .actions > *{
        min-width: 0;
        width: 100%;
      }
      .actionsQuick{
        width: auto;
        justify-content: flex-end;
        align-self: flex-end;
        margin-inline-start: auto;
        order: -1;
      }
      .headerNotifWrap{
        position: static;
      }
      .headerNotifPanel{
        position: fixed;
        left: max(8px, var(--safe-left));
        right: max(8px, var(--safe-right));
        top: auto;
        bottom: calc(8px + var(--safe-bottom));
        width: auto;
        max-width: none;
        max-height: min(72dvh, 560px);
        border-radius: 14px;
      }
      .sidebarPanel{
        width: min(320px, 92vw);
      }
      #currentUser{
        margin-inline: 0 !important;
        text-align: start;
      }
      .board.mobile-compact .col{
        border-radius: 10px;
        box-shadow: none;
        cursor: pointer;
      }
      .board.mobile-compact .colHead{
        border-bottom: 0;
        padding: 10px;
      }
      .board.mobile-compact .dropzone{ display: none; }
      .board.mobile-expanded{ grid-template-columns: 1fr; }
      .board.mobile-expanded .col{ display:none; }
      .board.mobile-expanded .colHead{ cursor:pointer; }
      .board.mobile-expanded .dropzone{ display:flex; }
      .board.mobile-expanded[data-active-status="new"] .col[data-status="new"],
      .board.mobile-expanded[data-active-status="sent"] .col[data-status="sent"],
      .board.mobile-expanded[data-active-status="delivered"] .col[data-status="delivered"],
      .board.mobile-expanded[data-active-status="returned"] .col[data-status="returned"]{
        display:block;
      }
    }

    .col{
      background: rgba(243, 244, 246, 1);
      border:1px solid rgba(156, 163, 175, 0.55);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .col header{
      position: static;
      background: transparent;
      border:0;
      backdrop-filter:none;
    }
    .colHead{
      padding: 12px 12px 10px;
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:center;
      background: rgba(249, 250, 251, 1);
      border-bottom: 1px solid rgba(156, 163, 175, 0.55);
    }
    .colTitle{
      display:flex;
      gap:10px;
      align-items:center;
      font-weight:800;
      font-size: 13px;
    }
    .pill {
      font-size: 11px;
      color: rgba(107, 114, 128, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      background: rgba(243, 244, 246, 1);
      padding: 4px 9px;
      border-radius: 999px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: rgba(107, 114, 128, 1);
      box-shadow: 0 0 0 4px rgba(156, 163, 175, 0.35);
    }
    .dot.good{ background: var(--good); box-shadow: 0 0 0 4px rgba(46,204,113,.14); }
    .dot.warn{ background: var(--warn); box-shadow: 0 0 0 4px rgba(241,196,15,.14); }
    .dot.bad{ background: var(--bad); box-shadow: 0 0 0 4px rgba(231,76,60,.14); }

    .dropzone{
      padding: 12px;
      min-height: 220px;
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .dropzone.dragover{
      outline: 2px dashed rgba(156, 163, 175, 0.55);
      outline-offset: -8px;
    }

    .card{
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 12px;
      cursor: grab;
      transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
      color: var(--text);
    }
    .card:hover{
      background: rgba(243, 244, 246, 1);
      border-color: rgba(31, 41, 55, 0.55);
      transform: translateY(-1px);
    }
    .card:active{ cursor: grabbing; }
    .card.dragging{ opacity: .55; transform: rotate(-1deg) scale(.99); }
    .meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 10px; }
    .id{ font-weight: 900; font-size: 12px; letter-spacing: 0.2px; color: rgba(31, 41, 55, 1); }
    .badge{ font-size: 11px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(156, 163, 175, 0.55); background: rgba(243, 244, 246, 1); color: rgba(107, 114, 128, 1); white-space: nowrap; }
    .line { height: 1px; background: rgba(209, 213, 219, 1); margin: 10px 0; }
    .label { font-size: 11px; color: rgba(107, 114, 128, 1); margin-bottom: 4px; font-weight: 500; }
    .text { font-size: 12.5px; line-height: 1.5; color: rgba(31, 41, 55, 1); white-space: pre-wrap; overflow-wrap: anywhere; }
    .miniRow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; color: rgba(107, 114, 128, 1); font-size: 11px; align-items: center; justify-content: space-between; }
    .miniRow .emp { color: rgba(31, 41, 55, 1); font-weight: 700; }
    .thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }
    .thumbs img{ width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border:1px solid rgba(31,42,58,.85); }

    /* Modal */
    .modalBackdrop { position: fixed; inset: 0; background: rgba(31, 41, 55, 0.35); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 50; overflow-x: hidden; }
    .modalBackdrop.open{ display:flex; }
    .modal { width: min(860px, 100%); max-width: 100%; background: rgba(249, 250, 251, 1); border: 1px solid rgba(156, 163, 175, 0.55); border-radius: 18px; box-shadow: 0 25px 80px rgba(31, 41, 55, 0.25); overflow: hidden; }
    .modalHead { padding: 14px 14px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(249, 250, 251, 1); border-bottom: 1px solid rgba(156, 163, 175, 0.55); }
    .modalHead h2 { font-size: 14px; font-weight: 700; color: rgba(31, 41, 55, 1); }
    .modalBody{ padding: 14px; display:grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; overflow-x: hidden; }
    @media (max-width: 820px){ .modalBody{ grid-template-columns: 1fr; } }
    .field { background: rgba(249, 250, 251, 1); border: 1px solid rgba(156, 163, 175, 0.55); border-radius: 14px; padding: 10px; }
    .fieldTitle{ display:flex; justify-content:space-between; align-items:center; gap: 10px; margin-bottom: 8px; }
    .fieldTitle strong{ font-size: 12px; }
    .hint { font-size: 11px; color: rgba(156, 163, 175, 1); }
    textarea, input, select { width: 100%; border-radius: 12px; border: 1px solid rgba(156, 163, 175, 0.55); background: rgba(249, 250, 251, 1); color: rgba(31, 41, 55, 1); padding: 10px; outline: none; font-size: 13px; }
    .modal textarea, .modal input, .modal select { background: rgba(249, 250, 251, 1); border: 1px solid rgba(156, 163, 175, 0.55); color: rgba(31, 41, 55, 1); }
    textarea{ min-height: 110px; resize: vertical; line-height:1.5; }
    .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; min-width: 0; }
    .row > div, .field{ min-width: 0; }
    @media (max-width: 820px){ .row{ grid-template-columns: 1fr; } }
    .uploads{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top: 8px; }
    .uploads .chip { font-size: 11px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(156, 163, 175, 0.55); background: rgba(243, 244, 246, 1); color: rgba(107, 114, 128, 1); }
    .previewGrid{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
    .preview { width: 90px; height: 90px; border-radius: 14px; overflow: hidden; position: relative; background: rgba(243, 244, 246, 1); border: 1px solid rgba(156, 163, 175, 0.55); }
    .preview img{ width:100%; height:100%; object-fit:cover; display:block; }
    .preview button { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 10px; border: 1px solid rgba(156, 163, 175, 0.55); background: rgba(249, 250, 251, 1); color: rgba(31, 41, 55, 1); cursor: pointer; font-weight: 900; }
    .modalFoot { padding: 12px 14px 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; background: rgba(249, 250, 251, 1); border-top: 1px solid rgba(156, 163, 175, 0.55); }
    .smallNote { font-size: 11px; color: rgba(107, 114, 128, 1); line-height: 1.5; }
    @media (max-width: 620px){
      .modalBackdrop{
        padding: 8px;
        align-items: flex-end;
      }
      .modal{
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
      }
      .modalHead{
        padding: 10px;
      }
      .modalHead h2{
        font-size: 13px;
      }
      .modalBody{
        padding: 10px;
        gap: 10px;
        overflow: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
      }
      .field{
        border-radius: 12px;
        padding: 8px;
      }
      .fieldTitle{
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }
      .modal textarea{
        min-height: 84px;
      }
      #rodfintiBackdrop input,
      #rodfintiBackdrop select,
      #rodfintiBackdrop textarea{
        font-size: 16px;
      }
      .preview{
        width: 72px;
        height: 72px;
      }
      .modalFoot{
        padding: 10px;
        gap: 8px;
      }
      .modalFoot .smallNote{
        width: 100%;
        font-size: 10px;
      }
      .modalFoot > div:last-child{
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .modal .btn{
        width: 100%;
        justify-content: center;
        min-height: 42px;
        padding: 10px 12px;
      }
      .drivePreviewFrame{
        min-height: 260px;
        max-height: 56dvh;
      }
      #rodfintiBackdrop .modal{
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
      }
    }
    .searchWrap{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      min-width:0;
      flex:1 1 560px;
    }
    .search{
      flex:1 1 320px;
      min-width: 220px;
      max-width: 520px;
    }
    .sourceFilter{
      width:auto;
      min-width:130px;
      max-width:170px;
      flex: 0 0 auto;
    }
    #currentUser{
      flex: 0 1 340px;
      min-width: 180px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    @media (max-width: 1220px){
      .topbar{
        align-items:flex-start;
      }
      .actions{
        width:100%;
        justify-content:flex-start;
      }
      .searchWrap{
        flex: 1 1 100%;
        order: 20;
      }
      .actionsQuick{
        order: 5;
      }
      #currentUser{
        order: 10;
      }
      #newTicketBtn{
        order: 30;
      }
    }
    @media (max-width: 620px){
      .searchWrap{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .search, .sourceFilter{
        min-width: 0;
        max-width: none;
        width: 100%;
      }
      #adminUsersBtn,
      #createUserQuickBtn,
      #createCompanyQuickBtn,
      #newTicketBtn{
        width: 100%;
      }
    }
    @media (max-width: 620px){
      .topbar{
        padding: 10px 12px;
      }
      .container{
        padding: 10px;
      }
      .brand h1{
        font-size: 14px;
      }
      #dailyTasksSection .tasksHead{
        align-items: stretch;
      }
      #dailyTasksSection .tasksFilters{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
      }
      #dailyTasksSection #taskStatusFilter,
      #dailyTasksSection #taskDueFilter,
      #dailyTasksSection #taskDueToFilter{
        width: 100%;
        min-width: 0;
        max-width: none;
      }
      #dailyTasksSection #refreshTasksBtn{
        width: 100%;
        grid-column: 1 / -1;
      }
      #expensesSection .tasksHead,
      #collectionsSection .tasksHead{
        align-items: stretch;
      }
      #expensesSection .tasksFilters,
      #collectionsSection .tasksFilters{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
      }
      #expensesSection .financeRange,
      #collectionsSection .financeRange{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
      }
      #expensesSection .financeRange input,
      #collectionsSection .financeRange input{
        width: 100%;
        min-width: 0;
        max-width: none;
      }
      #expensesSection #refreshExpensesBtn,
      #collectionsSection #refreshCollectionsBtn{
        width: 100%;
        grid-column: 1 / -1;
        justify-content: center;
      }
      .miniRow{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .miniRow > div{
        width: 100%;
      }
      .miniRow > div:last-child{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .miniRow > div:last-child .btn{
        flex: 1 1 130px;
        justify-content: center;
      }
      #dailyTasksSection .taskActionRow .btn{
        width: 100%;
      }
    }
    .toast { position: fixed; bottom: 16px; right: 16px; background: rgba(249, 250, 251, 1); border: 1px solid rgba(156, 163, 175, 0.55); color: rgba(31, 41, 55, 1); padding: 10px 12px; border-radius: 14px; box-shadow: var(--shadow); font-size: 12px; display: none; z-index: 60; }
    .toast.show{ display:block; }
    .roleTag{ display:inline-flex; align-items:center; font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid rgba(156,163,175,.55); background:rgba(243,244,246,1); margin-inline-start:6px; }
    .monthlyTicker{
      max-width: 1300px;
      margin: 0 auto;
      padding: 5px 16px 6px;
      display:flex;
      align-items:center;
      gap:8px;
      border-top: 1px solid rgba(59, 130, 246, 0.35);
      border-bottom: 1px solid rgba(37, 99, 235, 0.52);
      background:
        radial-gradient(1200px 120px at 90% -30%, rgba(96, 165, 250, 0.22), transparent 50%),
        radial-gradient(1000px 120px at 8% 140%, rgba(37, 99, 235, 0.16), transparent 50%),
        rgba(239, 246, 255, 0.96);
    }
    .monthlyTickerLabel{
      flex: 0 0 auto;
      font-size: 10px;
      font-weight: 800;
      color: #f8fafc;
      border: 1px solid rgba(30, 64, 175, 0.35);
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border-radius: 999px;
      padding: 2px 9px;
      white-space: nowrap;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
    }
    .monthlyTickerViewport{
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid rgba(96, 165, 250, 0.5);
      background: rgba(255, 255, 255, 0.9);
      padding: 4px 8px;
      position: relative;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    .monthlyTickerViewport::before,
    .monthlyTickerViewport::after{
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 26px;
      z-index: 2;
      pointer-events: none;
    }
    .monthlyTickerViewport::before{
      inset-inline-start: 0;
      background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.95));
    }
    .monthlyTickerViewport::after{
      inset-inline-end: 0;
      background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.95));
    }
    .monthlyTickerTrack{
      display:flex;
      align-items:center;
      width:max-content;
      animation: monthlyTickerMove 28s linear infinite;
      will-change: transform;
      direction: ltr;
    }
    .monthlyTickerTrack.static{
      width:100%;
      animation: none;
    }
    .monthlyTickerRun{
      display:flex;
      align-items:center;
      gap: 8px;
      padding-inline-end: 25px;
      white-space: nowrap;
      direction: rtl;
    }
    .monthlyTickerItem{
      display:inline-flex;
      align-items:center;
      gap:5px;
      font-size: 11px;
      color: rgba(31, 41, 55, 1);
      border: 1px solid rgba(96, 165, 250, 0.5);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(239,246,255,0.95), rgba(219,234,254,0.88));
      padding: 3px 7px;
    }
    .monthlyTickerItem strong{
      font-weight: 900;
      color: #0f172a;
    }
    .monthlyTickerCrown{
      margin-inline-start: 3px;
      font-size: 11px;
      vertical-align: middle;
    }
    .monthlyTickerSep{
      opacity: .62;
      font-weight: 900;
      color: #1d4ed8;
      user-select: none;
    }
    .monthlyTickerEmpty{
      font-size: 11px;
      color: rgba(107, 114, 128, 1);
    }
    .monthlyTickerViewport:hover .monthlyTickerTrack{
      animation-play-state: paused;
    }
    @keyframes monthlyTickerMove{
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce){
      .monthlyTickerTrack{
        animation: none !important;
      }
    }
    .tasksSection{
      margin-top: 16px;
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .tasksHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom: 12px;
    }
    .sectionToggleBtn{
      display:none;
      min-width: 40px;
      min-height: 40px;
      padding: 8px 10px;
      justify-content:center;
    }
    .sectionToggleBtn .chev{
      display:inline-block;
      transition: transform .16s ease;
    }
    .sectionToggleBtn[aria-expanded="false"] .chev{
      transform: rotate(180deg);
    }
    .tasksTitleWrap h2{
      margin:0;
      font-size: 16px;
      color: rgba(31, 41, 55, 1);
    }
    .tasksTitleWrap p{
      margin:4px 0 0;
      font-size:12px;
      color: rgba(107, 114, 128, 1);
    }
    .tasksFilters{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .tasksFilters select,
    .tasksFilters input{
      width:auto;
      min-width: 140px;
      padding: 8px 10px;
    }
    .financeRange{
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
    }
    .tasksGrid{
      display:grid;
      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
      gap: 12px;
    }
    .taskComposer{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
      height: fit-content;
    }
    .taskListWrap{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
      min-height: 120px;
    }
    .taskList{
      display:flex;
      flex-direction:column;
      gap: 10px;
    }
    .assigneeDropdown{
      position: relative;
      margin-top: 6px;
    }
    .assigneeDropdownBtn{
      width: 100%;
      justify-content: space-between;
      text-align: right;
      min-height: 42px;
    }
    .assigneeDropdownMenu{
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      left: 0;
      z-index: 20;
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 12px;
      padding: 8px;
      box-shadow: var(--shadow);
      display: none;
      max-height: 220px;
      overflow: auto;
    }
    .assigneeDropdown.open .assigneeDropdownMenu{
      display: block;
    }
    .assigneeOption{
      display:flex;
      align-items:center;
      gap:8px;
      font-size: 12px;
      color: rgba(31, 41, 55, 1);
      padding: 6px 4px;
      border-radius: 8px;
      cursor: pointer;
    }
    .assigneeOption:hover{
      background: rgba(243, 244, 246, 1);
    }
    .assigneeOption input{
      width: 16px;
      height: 16px;
      margin: 0;
      flex: 0 0 auto;
    }
    .assigneeEmpty{
      font-size: 12px;
      color: rgba(107, 114, 128, 1);
      padding: 6px 4px;
    }
    .taskCard{
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 12px;
      padding: 10px;
    }
    .taskCardHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom: 8px;
    }
    .taskTitle{
      margin:0;
      font-weight: 800;
      font-size: 13px;
      color: rgba(31, 41, 55, 1);
    }
    .taskMeta{
      margin-top: 4px;
      font-size: 11px;
      color: rgba(107, 114, 128, 1);
      line-height: 1.45;
    }
    .taskStatus{
      font-size: 11px;
      font-weight: 700;
      border-radius: 999px;
      padding: 4px 8px;
      white-space: nowrap;
      border: 1px solid rgba(156, 163, 175, 0.55);
      color: rgba(107, 114, 128, 1);
      background: rgba(243, 244, 246, 1);
    }
    .taskStatus.pending{
      border-color: rgba(245, 158, 11, 0.45);
      color: rgba(146, 64, 14, 1);
      background: rgba(254, 243, 199, 1);
    }
    .taskStatus.completed{
      border-color: rgba(34, 197, 94, 0.45);
      color: rgba(22, 101, 52, 1);
      background: rgba(220, 252, 231, 1);
    }
    .taskText{
      font-size: 12px;
      line-height: 1.55;
      color: rgba(31, 41, 55, 1);
      white-space: pre-wrap;
      margin-top: 8px;
    }
    .taskComment{
      margin-top: 8px;
      border-top: 1px dashed rgba(156, 163, 175, 0.55);
      padding-top: 8px;
      font-size: 12px;
      color: rgba(31, 41, 55, 1);
      white-space: pre-wrap;
      line-height: 1.55;
    }
    .taskActionRow{
      margin-top: 8px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .tasksWarning{
      margin-bottom: 8px;
      border: 1px solid rgba(239, 68, 68, 0.35);
      background: rgba(254, 242, 242, 1);
      color: rgba(127, 29, 29, 1);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.5;
    }
    .tasksEmpty{
      font-size: 12px;
      color: rgba(107, 114, 128, 1);
      padding: 8px;
      text-align:center;
    }
    .appNotificationsSection{
      margin-top: 0;
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .appNotificationsBody{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
      min-height: 120px;
    }
    .appNotifList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .appNotifItem{
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 12px;
      padding: 10px;
    }
    .appNotifHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:8px;
    }
    .appNotifTitle{
      margin:0;
      font-size:13px;
      font-weight:800;
      color: rgba(31, 41, 55, 1);
    }
    .appNotifDate{
      font-size:11px;
      color: rgba(107, 114, 128, 1);
      white-space: nowrap;
    }
    .appNotifMeta{
      margin-top:4px;
      font-size:11px;
      color: rgba(107, 114, 128, 1);
      line-height:1.5;
    }
    .appNotifBody{
      margin-top:8px;
      font-size:12px;
      color: rgba(31, 41, 55, 1);
      line-height:1.6;
      white-space: pre-wrap;
    }
    .manageAppPermList{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap:8px;
    }
    .manageAppPermOption{
      display:flex;
      align-items:center;
      gap:6px;
      border:1px solid rgba(156, 163, 175, 0.5);
      border-radius:10px;
      padding:7px 8px;
      background: rgba(249, 250, 251, 1);
      font-size: 12px;
      color: rgba(31, 41, 55, 1);
      cursor:pointer;
    }
    .manageAppPermOption input{
      width: 16px;
      height: 16px;
      accent-color: rgba(22, 163, 74, 1);
      cursor:pointer;
    }
    .appNotifUnreadBadge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: 26px;
      padding: 0 8px;
      height: 26px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      color: rgba(127, 29, 29, 1);
      background: rgba(254, 226, 226, 1);
      border: 1px solid rgba(239, 68, 68, 0.45);
    }
    .appNotifUnreadBadge--bell{
      position: absolute;
      top: -6px;
      left: -6px;
      min-width: 20px;
      height: 20px;
      padding: 0 5px;
      font-size: 10px;
      box-shadow: 0 4px 10px rgba(127, 29, 29, 0.2);
    }
    .financeTabs{
      margin-top: 16px;
      display:flex;
      align-items:center;
      gap:8px;
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 8px;
      box-shadow: var(--shadow);
    }
    .financeTabBtn{
      flex: 1 1 0;
      border: 1px solid rgba(156, 163, 175, 0.5);
      background: rgba(255, 255, 255, 0.95);
      color: rgba(31, 41, 55, 1);
      border-radius: 10px;
      padding: 10px 12px;
      font-weight: 800;
      font-size: 13px;
      cursor: pointer;
      transition: all .18s ease;
    }
    .financeTabBtn.active{
      border-color: rgba(16, 185, 129, 0.8);
      background: rgba(16, 185, 129, 0.14);
      color: rgba(6, 95, 70, 1);
      box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2) inset;
    }
    .financeTabBtn:focus-visible{
      outline: 2px solid rgba(16, 185, 129, 0.55);
      outline-offset: 2px;
    }
    .expensesSection{
      margin-top: 16px;
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .expensesGrid{
      display:grid;
      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
      gap: 12px;
    }
    .expenseFormCard{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
      height: fit-content;
    }
    .expenseListWrap{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
      min-height: 120px;
    }
    .expenseTotal{
      font-size: 12px;
      font-weight: 800;
      color: rgba(31, 41, 55, 1);
      margin-bottom: 8px;
      position: sticky;
      top: 8px;
      z-index: 2;
      background: rgba(243, 244, 246, 0.96);
      border: 1px solid rgba(156, 163, 175, 0.45);
      border-radius: 10px;
      padding: 8px 10px;
    }
    .expenseList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .expenseItem{
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 12px;
      padding: 10px;
    }
    .expenseItemHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom:6px;
    }
    .expenseAmount{
      font-weight: 900;
      color: rgba(127, 29, 29, 1);
      font-size: 14px;
      white-space: nowrap;
    }
    .expenseMeta{
      font-size:11px;
      color: rgba(107, 114, 128, 1);
      line-height:1.5;
    }
    .expenseNote{
      margin-top:8px;
      font-size:12px;
      color: rgba(31, 41, 55, 1);
      white-space: pre-wrap;
      line-height: 1.55;
    }
    .expensesWarning{
      margin-bottom: 8px;
      border: 1px solid rgba(239, 68, 68, 0.35);
      background: rgba(254, 242, 242, 1);
      color: rgba(127, 29, 29, 1);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.5;
    }
    .expensesEmpty{
      font-size: 12px;
      color: rgba(107, 114, 128, 1);
      padding: 8px;
      text-align:center;
    }
    .collectionsSection{
      margin-top: 16px;
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .collectionsGrid{
      display:grid;
      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
      gap: 12px;
    }
    .collectionFormCard{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
      height: fit-content;
    }
    .collectionListWrap{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
      min-height: 120px;
    }
    .financialStats{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:8px;
      margin-bottom: 8px;
      position: sticky;
      top: 8px;
      z-index: 2;
      background: rgba(243, 244, 246, 0.96);
      border: 1px solid rgba(156, 163, 175, 0.45);
      border-radius: 12px;
      padding: 8px;
    }
    .financialStat{
      border: 1px solid rgba(156, 163, 175, 0.55);
      background: rgba(249, 250, 251, 1);
      border-radius: 10px;
      padding: 8px 10px;
    }
    .financialStat .label{
      margin: 0 0 4px;
      font-size: 11px;
      color: rgba(107, 114, 128, 1);
    }
    .financialStat .value{
      font-size: 14px;
      font-weight: 900;
      color: rgba(31, 41, 55, 1);
    }
    .financialStat .value.neg{
      color: rgba(127, 29, 29, 1);
    }
    .collectionList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .collectionItem{
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 12px;
      padding: 10px;
    }
    .collectionAmount{
      font-weight: 900;
      color: rgba(22, 101, 52, 1);
      font-size: 14px;
      white-space: nowrap;
    }
    .collectionsWarning{
      margin-bottom: 8px;
      border: 1px solid rgba(239, 68, 68, 0.35);
      background: rgba(254, 242, 242, 1);
      color: rgba(127, 29, 29, 1);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.5;
    }
    .collectionsEmpty{
      font-size: 12px;
      color: rgba(107, 114, 128, 1);
      padding: 8px;
      text-align:center;
    }
    .inventorySection{
      margin-top: 16px;
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .inventoryGrid{
      display:grid;
      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
      gap: 12px;
    }
    .inventoryGrid.form-hidden{
      grid-template-columns: minmax(0, 1fr);
    }
    .inventoryTopBar{
      grid-column: 1 / -1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 6px 0 2px;
      flex-wrap: wrap;
    }
    .inventoryTabs{
      display:inline-flex;
      gap:6px;
      flex-wrap: wrap;
    }
    .inventoryTabBtn{
      min-width: 112px;
      justify-content:center;
    }
    .inventoryTabBtn.active{
      background: linear-gradient(135deg, #1d4ed8, #2563eb);
      border-color: #1d4ed8;
      color: #ffffff;
    }
    .inventoryFormCard{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
      height: fit-content;
    }
    .inventoryListWrap{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
      min-height: 120px;
    }
    .inventoryWarning{
      margin-bottom: 8px;
      border: 1px solid rgba(239, 68, 68, 0.35);
      background: rgba(254, 242, 242, 1);
      color: rgba(127, 29, 29, 1);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.5;
    }
    .inventorySummary{
      font-size: 12px;
      font-weight: 800;
      color: rgba(31, 41, 55, 1);
      margin-bottom: 8px;
    }
    .inventoryEmpty{
      font-size: 12px;
      color: rgba(107, 114, 128, 1);
      padding: 8px;
      text-align:center;
    }
    .inventoryList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .inventoryItem{
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 12px;
      padding: 10px;
    }
    .inventoryItemHead{
      display:grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      gap:10px;
      align-items:flex-start;
      margin-bottom:6px;
    }
    .inventoryImage{
      width:58px;
      height:58px;
      border-radius:10px;
      border:1px solid rgba(156,163,175,.55);
      background: rgba(229, 231, 235, 1);
      object-fit:cover;
      display:block;
    }
    .inventoryImage.placeholder{
      display:flex;
      align-items:center;
      justify-content:center;
      color: rgba(107, 114, 128, 1);
      font-size: 20px;
      font-weight: 800;
    }
    .inventoryName{
      margin:0;
      font-size: 13px;
      font-weight: 900;
      color: rgba(31, 41, 55, 1);
      line-height: 1.4;
      word-break: break-word;
    }
    .inventoryId{
      margin-top:4px;
      font-size:11px;
      color: rgba(107, 114, 128, 1);
      line-height:1.45;
    }
    .inventoryStockTag{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: 74px;
      font-size: 11px;
      font-weight: 800;
      border-radius: 999px;
      padding: 4px 8px;
      border: 1px solid rgba(34, 197, 94, 0.45);
      color: rgba(22, 101, 52, 1);
      background: rgba(220, 252, 231, 1);
      white-space: nowrap;
    }
    .inventoryStockTag.out{
      border-color: rgba(239, 68, 68, 0.45);
      color: rgba(127, 29, 29, 1);
      background: rgba(254, 226, 226, 1);
    }
    .inventoryMeta{
      font-size:11px;
      color: rgba(107, 114, 128, 1);
      line-height: 1.55;
      margin-top:6px;
    }
    .inventoryActions{
      margin-top:8px;
      display:flex;
      justify-content:flex-end;
      gap:8px;
    }
    .inventoryBigAction{
      min-height: 46px;
      font-size: 14px;
      font-weight: 800;
    }
    .inventoryBigAction:active{
      transform: scale(1.03);
    }
    .inventoryCompanyPrices{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:8px;
      max-height: 220px;
      overflow:auto;
      padding-inline-end: 2px;
    }
    .inventoryCompanyPriceRow{
      display:grid;
      grid-template-columns: minmax(0, 1fr) 130px;
      gap:8px;
      align-items:center;
    }
    .inventoryCompanyPriceName{
      font-size:11px;
      font-weight:700;
      color: rgba(55, 65, 81, 1);
      line-height: 1.4;
      overflow-wrap:anywhere;
    }
    .orderInventoryPicker{
      position: relative;
    }
    .customerAreaPicker #customerAreaSearch{
      width: 100%;
    }
    .orderInventoryDropdown{
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      z-index: 35;
      max-height: 260px;
      overflow: auto;
      border: 1px solid rgba(156, 163, 175, 0.65);
      border-radius: 12px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
      display: none;
      padding: 4px;
    }
    .orderInventoryPicker.open .orderInventoryDropdown{
      display: block;
    }
    .orderInventoryOption{
      border: 0;
      width: 100%;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      text-align: right;
      background: transparent;
      border-radius: 10px;
      padding: 6px;
      cursor: pointer;
    }
    .customerAreaDropdown .customerAreaOption{
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }
    .customerAreaDropdown .customerAreaOption .orderInventoryOptionName{
      margin-bottom: 1px;
    }
    .orderInventoryOption:hover{
      background: rgba(243, 244, 246, 1);
    }
    .orderInventoryOption.selected{
      background: rgba(219, 234, 254, 1);
      outline: 1px solid rgba(59, 130, 246, 0.35);
    }
    .orderInventoryOptionImg{
      width: 44px;
      height: 44px;
      border-radius: 9px;
      border: 1px solid rgba(156, 163, 175, 0.55);
      object-fit: cover;
      background: rgba(229, 231, 235, 1);
      display: block;
    }
    .orderInventoryOptionImg.placeholder{
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 11px;
      font-weight: 800;
      color: rgba(107, 114, 128, 1);
    }
    .orderInventoryOptionName{
      font-size: 12px;
      font-weight: 800;
      color: rgba(31, 41, 55, 1);
      line-height: 1.35;
      margin-bottom: 2px;
    }
    .orderInventoryOptionMeta{
      font-size: 11px;
      color: rgba(75, 85, 99, 1);
      line-height: 1.4;
    }
    .orderInventoryDropdownEmpty{
      font-size: 12px;
      color: rgba(107, 114, 128, 1);
      text-align: center;
      padding: 8px 6px;
    }
    .orderTextHidden{
      display: none !important;
    }
    .orderSelectedProducts{
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-height: 36px;
    }
    .orderSelectedProductsEmpty{
      font-size: 12px;
      color: rgba(107, 114, 128, 1);
      border: 1px dashed rgba(156, 163, 175, 0.6);
      border-radius: 12px;
      padding: 8px 10px;
      background: rgba(243, 244, 246, 1);
    }
    .orderSelectedItem{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      max-width: 100%;
      border: 1px solid rgba(148, 163, 184, 0.65);
      border-radius: 999px;
      padding: 5px 8px 5px 10px;
      background: rgba(243, 244, 246, 1);
      color: rgba(31, 41, 55, 1);
    }
    .orderSelectedItemImg{
      width: 26px;
      height: 26px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.55);
      object-fit: cover;
      background: rgba(229, 231, 235, 1);
      flex: 0 0 auto;
    }
    .orderSelectedItemText{
      font-size: 12px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .orderSelectedItemRemove{
      border: 1px solid rgba(156, 163, 175, 0.6);
      background: rgba(249, 250, 251, 1);
      color: rgba(55, 65, 81, 1);
      width: 24px;
      height: 24px;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 900;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .orderSelectedItemRemove:disabled{
      opacity: 0.45;
      cursor: not-allowed;
    }
    .driveSection{
      margin-top: 16px;
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .driveGrid{
      display:grid;
      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
      gap: 12px;
    }
    .driveComposerCard{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
      height: fit-content;
    }
    .driveListWrap{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
      min-height: 120px;
    }
    .driveActions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      margin-top:8px;
    }
    .driveActions .btn{
      min-height: 38px;
    }
    .driveBreadcrumb{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-bottom: 8px;
      padding: 8px;
      border: 1px dashed rgba(156, 163, 175, 0.55);
      border-radius: 10px;
      background: rgba(249, 250, 251, 1);
    }
    .driveBreadcrumb button{
      border: 1px solid rgba(156, 163, 175, 0.55);
      background: rgba(255, 255, 255, 1);
      color: rgba(31, 41, 55, 1);
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      padding: 5px 10px;
      cursor: pointer;
    }
    .driveBreadcrumb button:hover{
      background: rgba(229, 231, 235, 1);
    }
    .driveBreadcrumb .sep{
      font-size: 11px;
      color: rgba(107, 114, 128, 1);
      align-self:center;
      user-select:none;
    }
    .driveWarning{
      margin-bottom: 8px;
      border: 1px solid rgba(239, 68, 68, 0.35);
      background: rgba(254, 242, 242, 1);
      color: rgba(127, 29, 29, 1);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-wrap;
    }
    .driveEmpty{
      font-size: 12px;
      color: rgba(107, 114, 128, 1);
      padding: 8px;
      text-align:center;
    }
    .driveList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .driveItem{
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 12px;
      padding: 10px;
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items:flex-start;
    }
    .driveItemMain{
      min-width: 0;
    }
    .driveItemName{
      margin:0;
      font-size:13px;
      font-weight:900;
      color: rgba(31, 41, 55, 1);
      display:flex;
      gap:6px;
      align-items:center;
      line-height:1.4;
      word-break: break-word;
    }
    .driveKind{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: 48px;
      font-size: 10px;
      border-radius: 999px;
      padding: 3px 7px;
      border: 1px solid rgba(156, 163, 175, 0.55);
      color: rgba(31, 41, 55, 1);
      background: rgba(229, 231, 235, 1);
      font-weight: 700;
    }
    .driveKind.folder{
      border-color: rgba(245, 158, 11, 0.55);
      background: rgba(254, 243, 199, 1);
      color: rgba(146, 64, 14, 1);
    }
    .driveKind.file{
      border-color: rgba(59, 130, 246, 0.45);
      background: rgba(219, 234, 254, 1);
      color: rgba(30, 64, 175, 1);
    }
    .driveMeta{
      margin-top: 6px;
      font-size: 11px;
      color: rgba(107, 114, 128, 1);
      line-height: 1.5;
      word-break: break-word;
    }
    .driveItemBtns{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:6px;
      max-width: 280px;
    }
    .driveItemBtns .btn{
      padding: 6px 10px;
      min-height: 34px;
      font-size: 12px;
    }
    .driveAssignUsers{
      margin-top: 8px;
      max-height: 280px;
      overflow: auto;
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 10px;
      background: rgba(249, 250, 251, 1);
      padding: 6px;
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .driveAssignOption{
      display:flex;
      align-items:center;
      gap:8px;
      padding: 6px 8px;
      border-radius: 8px;
      font-size: 12px;
      color: rgba(31, 41, 55, 1);
      cursor: pointer;
    }
    .driveAssignOption:hover{
      background: rgba(243, 244, 246, 1);
    }
    .driveAssignOption input{
      width: 16px;
      height: 16px;
      margin: 0;
      flex: 0 0 auto;
    }
    .driveAssignEmpty{
      font-size: 12px;
      color: rgba(107, 114, 128, 1);
      padding: 8px;
      text-align: center;
    }
    .hrSection{
      margin-top: 16px;
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .hrGrid{
      display:grid;
      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
      gap: 12px;
    }
    .hrActionCard,
    .hrScheduleCard,
    .hrReportCard{
      background: rgba(243, 244, 246, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 14px;
      padding: 10px;
    }
    .hrReportCard{
      min-height: 120px;
    }
    .hrStatusLine{
      margin-top: 8px;
      font-size: 12px;
      color: rgba(31, 41, 55, 1);
      line-height: 1.6;
      white-space: pre-wrap;
    }
    .hrStatusLine.good{
      color: rgba(22, 101, 52, 1);
    }
    .hrStatusLine.warn{
      color: rgba(146, 64, 14, 1);
    }
    .hrStatusLine.bad{
      color: rgba(127, 29, 29, 1);
    }
    .hrStats{
      margin-top: 10px;
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .hrStat{
      border: 1px solid rgba(156, 163, 175, 0.55);
      background: rgba(249, 250, 251, 1);
      border-radius: 10px;
      padding: 8px;
    }
    .hrStat .label{
      margin: 0 0 4px;
      font-size: 11px;
      color: rgba(107, 114, 128, 1);
    }
    .hrStat .value{
      font-size: 14px;
      font-weight: 900;
      color: rgba(31, 41, 55, 1);
    }
    .hrActions{
      margin-top: 10px;
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .hrActions .btn{
      flex: 1 1 120px;
      min-height: 40px;
      justify-content: center;
    }
    .hrWarning{
      margin-bottom: 8px;
      border: 1px solid rgba(239, 68, 68, 0.35);
      background: rgba(254, 242, 242, 1);
      color: rgba(127, 29, 29, 1);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-wrap;
    }
    .hrSummary{
      margin-bottom: 8px;
      font-size: 12px;
      color: rgba(31, 41, 55, 1);
      line-height: 1.55;
      font-weight: 700;
    }
    .hrAttendanceEmpty{
      font-size: 12px;
      color: rgba(107, 114, 128, 1);
      padding: 8px;
      text-align:center;
    }
    .hrAttendanceList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .hrAttendanceItem{
      background: rgba(249, 250, 251, 1);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 12px;
      padding: 10px;
    }
    .hrAttendanceHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom: 6px;
    }
    .hrAttendanceMeta{
      font-size:11px;
      color: rgba(107, 114, 128, 1);
      line-height:1.5;
      margin-top: 3px;
    }
    .hrAttendanceHours{
      font-size: 13px;
      font-weight: 900;
      color: rgba(31, 41, 55, 1);
      white-space: nowrap;
    }
    .hrShiftTag{
      display:inline-block;
      margin-top: 6px;
      font-size: 11px;
      color: rgba(30, 64, 175, 1);
      border: 1px solid rgba(59, 130, 246, 0.35);
      border-radius: 999px;
      padding: 4px 8px;
      background: rgba(219, 234, 254, 1);
    }
    .drivePreviewFrame{
      width: 100%;
      min-height: 420px;
      max-height: min(72vh, 760px);
      border: 1px solid rgba(156, 163, 175, 0.55);
      border-radius: 12px;
      background: rgba(17, 24, 39, 0.04);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .drivePreviewFrame img,
    .drivePreviewFrame video{
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: rgba(17, 24, 39, 0.03);
    }
    .drivePreviewFrame iframe{
      width: 100%;
      height: 100%;
      border: 0;
      background: rgba(255, 255, 255, 1);
    }
    .drivePreviewFrame audio{
      width: min(560px, 96%);
    }
    .drivePreviewEmpty{
      padding: 14px;
      text-align: center;
      color: rgba(107, 114, 128, 1);
      font-size: 12px;
      line-height: 1.6;
      white-space: pre-wrap;
    }
    .drivePreviewMeta{
      margin-top: 8px;
      font-size: 11px;
      color: rgba(107, 114, 128, 1);
      line-height: 1.6;
      word-break: break-word;
    }
    @media (max-width: 900px){
      .tasksGrid{ grid-template-columns: 1fr; }
      .tasksFilters{ width:100%; }
      .tasksFilters select,
      .tasksFilters input,
      .tasksFilters button{
        width:100%;
      }
      .expensesGrid{ grid-template-columns: 1fr; }
      .collectionsGrid{ grid-template-columns: 1fr; }
      .inventoryGrid{ grid-template-columns: 1fr; }
      .driveGrid{ grid-template-columns: 1fr; }
      .hrGrid{ grid-template-columns: 1fr; }
      .financialStats{ grid-template-columns: 1fr; }
      .hrStats{ grid-template-columns: 1fr; }
      .driveItem{
        grid-template-columns: 1fr;
      }
      .driveItemBtns{
        justify-content:flex-start;
        max-width: none;
      }
      .drivePreviewFrame{
        min-height: 320px;
      }
    }
    @media (max-width: 620px){
      .monthlyTicker{
        padding: 3px 6px 4px;
        gap: 5px;
        flex-direction: column;
        align-items: stretch;
      }
      .monthlyTickerLabel{
        width: fit-content;
        max-width: 100%;
        font-size: 9px;
        padding: 2px 6px;
        align-self: flex-start;
      }
      .monthlyTickerViewport{
        width: 100%;
        padding: 4px 6px;
        min-height: 24px;
      }
      .monthlyTickerTrack{
        animation-duration: 20s;
      }
      .monthlyTickerRun{
        gap: 6px;
        padding-inline-end: 18px;
      }
      .monthlyTickerItem{
        font-size: 10px;
        gap: 4px;
        padding: 2px 6px;
      }
      .sectionToggleBtn{
        display:inline-flex;
      }
      .tasksSection .tasksHead,
      .expensesSection .tasksHead,
      .collectionsSection .tasksHead,
      .inventorySection .tasksHead,
      .driveSection .tasksHead,
      .hrSection .tasksHead{
        cursor: pointer;
      }
      .tasksSection.mobile-collapsed .tasksGrid,
      .expensesSection.mobile-collapsed .expensesGrid,
      .collectionsSection.mobile-collapsed .collectionsGrid,
      .inventorySection.mobile-collapsed .inventoryGrid,
      .driveSection.mobile-collapsed .driveGrid,
      .hrSection.mobile-collapsed .hrGrid{
        display:none;
      }
      .tasksSection.mobile-collapsed .tasksFilters,
      .expensesSection.mobile-collapsed .tasksFilters,
      .collectionsSection.mobile-collapsed .tasksFilters,
      .inventorySection.mobile-collapsed .tasksFilters,
      .driveSection.mobile-collapsed .tasksFilters,
      .hrSection.mobile-collapsed .tasksFilters{
        display:none;
      }
      .tasksSection.mobile-collapsed .tasksHead,
      .expensesSection.mobile-collapsed .tasksHead,
      .collectionsSection.mobile-collapsed .tasksHead,
      .inventorySection.mobile-collapsed .tasksHead,
      .driveSection.mobile-collapsed .tasksHead,
      .hrSection.mobile-collapsed .tasksHead{
        margin-bottom:0;
      }
      .expensesSection.mobile-collapsed .tasksTitleWrap p,
      .collectionsSection.mobile-collapsed .tasksTitleWrap p{
        display:none;
      }
      .tasksSection.mobile-collapsed,
      .expensesSection.mobile-collapsed,
      .collectionsSection.mobile-collapsed,
      .inventorySection.mobile-collapsed,
      .driveSection.mobile-collapsed,
      .hrSection.mobile-collapsed{
        padding-bottom:10px;
      }
    }
    @media (max-width: 620px){
      .monthlyTicker,
      .topbar,
      .container,
      .appSignature{
        padding-inline-start: max(10px, var(--safe-left));
        padding-inline-end: max(10px, var(--safe-right));
      }
      .actions{
        display:grid;
        grid-template-columns: 1fr;
        gap:8px;
      }
      .actionsQuick{
        width:100%;
        justify-content:space-between;
        align-self:stretch;
        margin-inline-start:0;
      }
      #currentUser{
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.45;
      }
      input, select, textarea{
        font-size: 16px;
      }
      .tasksSection,
      .financeTabs,
      .expensesSection,
      .collectionsSection,
      .inventorySection,
      .driveSection,
      .hrSection{
        margin-top:12px;
        padding:10px;
        border-radius:14px;
        box-shadow: 0 6px 18px rgba(15,23,42,.12);
      }
      .financeTabs{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:6px;
        padding: 6px;
      }
      .financeTabBtn{
        width: 100%;
        min-width: 0;
        padding: 9px 8px;
        font-size: 12px;
      }
      .tasksHead{
        gap:8px;
        margin-bottom:10px;
      }
      .tasksTitleWrap h2{
        font-size:15px;
      }
      .tasksTitleWrap p{
        font-size:11px;
      }
      .monthlyTickerTrack{
        animation: monthlyTickerMove 20s linear infinite;
      }
      .monthlyTickerTrack.static{
        animation: none;
      }
      .toast{
        left:10px;
        right:10px;
        bottom: calc(10px + var(--safe-bottom));
      }
      .appSignature{
        padding-bottom: calc(14px + var(--safe-bottom));
      }
    }

    /* 2026 visual refresh (non-functional changes only) */
    :root{
      --bg: #eef4fb;
      --card: #ffffff;
      --text: #0f172a;
      --muted: #475569;
      --border: rgba(15, 23, 42, 0.14);
      --border-strong: rgba(15, 23, 42, 0.24);
      --accent: #0f766e;
      --accent-soft: rgba(15, 118, 110, 0.14);
      --accent-2: #0ea5e9;
      --good: #16a34a;
      --warn: #f59e0b;
      --bad: #dc2626;
      --shadow: 0 20px 46px rgba(15, 23, 42, 0.1);
      --shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.08);
      --radius: 18px;
    }

    body.appShell{
      font-family: var(--font-figma);
      background:
        radial-gradient(1100px 600px at 104% -8%, rgba(14, 165, 233, 0.14), transparent 62%),
        radial-gradient(900px 580px at -5% 22%, rgba(15, 118, 110, 0.15), transparent 63%),
        linear-gradient(180deg, #f6fafe 0%, #eef4fb 56%, #f8fafc 100%);
      color: var(--text);
    }

    .appShell header{
      backdrop-filter: blur(14px) saturate(130%);
      background: linear-gradient(180deg, rgba(248, 252, 255, 0.9), rgba(248, 252, 255, 0.74));
      border-bottom: 1px solid rgba(148, 163, 184, 0.28);
      z-index: 40;
    }

    .appShell .monthlyTicker{
      border-top: 0;
      border-bottom: 1px solid rgba(14, 116, 144, 0.28);
      background:
        radial-gradient(1200px 130px at 84% -42%, rgba(6, 182, 212, 0.2), transparent 54%),
        radial-gradient(950px 130px at 8% 132%, rgba(20, 184, 166, 0.15), transparent 52%),
        rgba(240, 249, 255, 0.9);
      padding: 10px 16px 12px;
    }

    .appShell .monthlyTickerLabel{
      color: #f8fafc;
      border-color: rgba(13, 148, 136, 0.45);
      background: linear-gradient(135deg, #0f766e, #14b8a6);
      box-shadow: 0 8px 18px rgba(15, 118, 110, 0.25);
    }

    .appShell .monthlyTickerViewport{
      border: 1px solid rgba(45, 212, 191, 0.4);
      background: rgba(255, 255, 255, 0.9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }

    .appShell .monthlyTickerItem{
      border: 1px solid rgba(45, 212, 191, 0.46);
      background: linear-gradient(180deg, rgba(240, 253, 250, 0.95), rgba(204, 251, 241, 0.9));
      color: #0f172a;
    }

    .appShell .topbar{
      margin: 12px auto 10px;
      background: rgba(255, 255, 255, 0.86);
      border: 1px solid rgba(148, 163, 184, 0.34);
      border-radius: 22px;
      box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
    }

    .appShell .logo{
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(148, 163, 184, 0.46);
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
    }

    .appShell h1{
      font-family: var(--font-figma);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.1px;
    }

    .appShell #currentUser{
      color: #0f172a !important;
      font-weight: 700 !important;
      background: rgba(248, 250, 252, 0.82);
      border: 1px dashed rgba(148, 163, 184, 0.48);
      border-radius: 12px;
      padding: 8px 10px;
    }

    .appShell .searchWrap{
      background: rgba(248, 251, 255, 0.78);
      border: 1px dashed rgba(148, 163, 184, 0.45);
      border-radius: 14px;
      padding: 8px;
    }

    .appShell .btn{
      border: 1px solid rgba(148, 163, 184, 0.5);
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff, #f3f7fc);
      color: #0f172a;
      font-weight: 700;
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
      transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
    }

    .appShell .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(71, 85, 105, 0.58);
      box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1);
    }

    .appShell .btn:active{
      transform: translateY(0);
    }

    .appShell .btn.primary{
      background: linear-gradient(135deg, #0f766e, #14b8a6);
      border-color: rgba(15, 118, 110, 0.72);
      color: #ffffff;
      box-shadow: 0 10px 22px rgba(15, 118, 110, 0.24);
    }

    .appShell .btn.primary:hover{
      border-color: rgba(15, 118, 110, 0.9);
      box-shadow: 0 14px 24px rgba(15, 118, 110, 0.28);
    }

    .appShell .btn.linked{
      background: linear-gradient(135deg, #0369a1, #0ea5e9);
      border-color: rgba(3, 105, 161, 0.7);
      color: #ffffff;
    }

    .appShell .btn.danger{
      background: linear-gradient(180deg, rgba(254, 242, 242, 1), rgba(254, 226, 226, 0.92));
      border-color: rgba(220, 38, 38, 0.35);
      color: #991b1b;
    }

    .appShell .btn.ghost{
      background: rgba(255, 255, 255, 0.62);
    }

    .appShell input,
    .appShell select,
    .appShell textarea{
      border: 1px solid rgba(148, 163, 184, 0.52);
      background: rgba(255, 255, 255, 0.94);
      color: #0f172a;
      border-radius: 12px;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

    .appShell input:focus,
    .appShell select:focus,
    .appShell textarea:focus{
      border-color: rgba(15, 118, 110, 0.74);
      box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
      background: #ffffff;
    }

    .appShell input::placeholder,
    .appShell textarea::placeholder{
      color: #64748b;
      opacity: 0.92;
    }

    .appShell .container{
      padding: 18px 16px 24px;
    }

    .appShell .board{
      gap: 16px;
    }

    .appShell .col{
      background: rgba(255, 255, 255, 0.86);
      border: 1px solid var(--border);
      border-radius: 20px;
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .appShell .colHead{
      padding: 14px 12px 12px;
      background: linear-gradient(180deg, rgba(248, 250, 252, 0.94), rgba(244, 247, 251, 0.9));
      border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    }

    .appShell .col[data-status="new"] .colHead{
      background: linear-gradient(180deg, rgba(224, 242, 254, 0.88), rgba(248, 250, 252, 0.92));
    }

    .appShell .col[data-status="sent"] .colHead{
      background: linear-gradient(180deg, rgba(255, 247, 237, 0.86), rgba(248, 250, 252, 0.92));
    }

    .appShell .col[data-status="delivered"] .colHead{
      background: linear-gradient(180deg, rgba(236, 253, 245, 0.9), rgba(248, 250, 252, 0.92));
    }

    .appShell .col[data-status="returned"] .colHead{
      background: linear-gradient(180deg, rgba(254, 242, 242, 0.9), rgba(248, 250, 252, 0.92));
    }

    .appShell .dot{
      width: 10px;
      height: 10px;
      background: #38bdf8;
      box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18);
    }

    .appShell .dot.warn{
      background: #f59e0b;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
    }

    .appShell .dot.good{
      background: #16a34a;
      box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2);
    }

    .appShell .dot.bad{
      background: #dc2626;
      box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18);
    }

    .appShell .pill,
    .appShell .badge{
      border: 1px solid rgba(148, 163, 184, 0.5);
      background: rgba(255, 255, 255, 0.9);
      color: #334155;
      font-weight: 700;
    }

    .appShell .dropzone{
      background: linear-gradient(180deg, rgba(248, 251, 255, 0.7), rgba(241, 245, 249, 0.52));
      min-height: 230px;
    }

    .appShell .dropzone.dragover{
      outline: 2px dashed rgba(14, 116, 144, 0.45);
      background: rgba(224, 242, 254, 0.4);
    }

    .appShell .card{
      border-radius: 16px;
      border: 1px solid rgba(148, 163, 184, 0.45);
      background: #ffffff;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    }

    .appShell .card:hover{
      background: #ffffff;
      border-color: rgba(71, 85, 105, 0.5);
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    }

    .appShell .id{
      font-family: var(--font-figma);
      color: #0f172a;
    }

    .appShell .line{
      background: rgba(203, 213, 225, 0.7);
    }

    .appShell .tasksSection,
    .appShell .expensesSection,
    .appShell .collectionsSection,
    .appShell .inventorySection,
    .appShell .driveSection,
    .appShell .hrSection{
      margin-top: 18px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 252, 255, 0.86));
      border: 1px solid rgba(148, 163, 184, 0.36);
      border-radius: 24px;
      box-shadow: var(--shadow);
      padding: 16px;
      position: relative;
      overflow: hidden;
    }

    .appShell .tasksSection::before,
    .appShell .expensesSection::before,
    .appShell .collectionsSection::before,
    .appShell .inventorySection::before,
    .appShell .driveSection::before,
    .appShell .hrSection::before{
      content: "";
      position: absolute;
      top: 0;
      inset-inline-start: 14px;
      inset-inline-end: 14px;
      height: 3px;
      border-radius: 0 0 999px 999px;
      background: linear-gradient(90deg, rgba(14, 165, 233, 0.24), rgba(20, 184, 166, 0.58), rgba(14, 165, 233, 0.24));
      pointer-events: none;
    }

    .appShell .tasksTitleWrap h2{
      font-family: var(--font-figma);
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
    }

    .appShell .tasksTitleWrap p{
      color: #64748b;
      font-size: 12px;
    }

    .appShell .tasksHead{
      padding-bottom: 8px;
      margin-bottom: 14px;
      border-bottom: 1px solid rgba(203, 213, 225, 0.6);
    }

    .appShell .taskComposer,
    .appShell .taskListWrap,
    .appShell .expenseFormCard,
    .appShell .expenseListWrap,
    .appShell .collectionFormCard,
    .appShell .collectionListWrap,
    .appShell .inventoryFormCard,
    .appShell .inventoryListWrap,
    .appShell .driveComposerCard,
    .appShell .driveListWrap,
    .appShell .hrActionCard,
    .appShell .hrScheduleCard,
    .appShell .hrReportCard,
    .appShell .appNotificationsBody{
      border: 1px solid rgba(148, 163, 184, 0.34);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9));
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    }

    .appShell .financeTabs{
      margin-top: 18px;
      border-radius: 16px;
      border: 1px solid rgba(148, 163, 184, 0.38);
      background: rgba(255, 255, 255, 0.84);
      box-shadow: var(--shadow-soft);
      padding: 8px;
    }

    .appShell .financeTabBtn{
      border-radius: 12px;
      border: 1px solid rgba(148, 163, 184, 0.45);
      background: linear-gradient(180deg, #ffffff, #f8fafc);
      color: #0f172a;
      font-family: var(--font-figma);
    }

    .appShell .financeTabBtn.active{
      border-color: rgba(15, 118, 110, 0.72);
      background: linear-gradient(135deg, rgba(15, 118, 110, 0.18), rgba(20, 184, 166, 0.15));
      color: #0f766e;
      box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.24);
    }

    .appShell .taskCard,
    .appShell .expenseItem,
    .appShell .collectionItem,
    .appShell .inventoryItem,
    .appShell .driveItem,
    .appShell .hrAttendanceItem,
    .appShell .appNotifItem{
      background: #ffffff;
      border: 1px solid rgba(148, 163, 184, 0.42);
      border-radius: 14px;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
    }

    .appShell .taskStatus{
      border-color: rgba(148, 163, 184, 0.45);
      background: rgba(248, 250, 252, 0.9);
      color: #475569;
    }

    .appShell .taskStatus.pending{
      border-color: rgba(245, 158, 11, 0.38);
      color: #92400e;
      background: rgba(254, 243, 199, 0.92);
    }

    .appShell .taskStatus.completed{
      border-color: rgba(22, 163, 74, 0.4);
      color: #166534;
      background: rgba(220, 252, 231, 0.9);
    }

    .appShell .expenseTotal,
    .appShell .financialStats{
      border-color: rgba(148, 163, 184, 0.4);
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .appShell .financialStat{
      border-color: rgba(148, 163, 184, 0.42);
      background: rgba(248, 250, 252, 0.94);
    }

    .appShell .inventoryTopBar{
      padding-top: 0;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(203, 213, 225, 0.6);
      margin-bottom: 2px;
    }

    .appShell .inventoryTabBtn.active{
      background: linear-gradient(135deg, #0f766e, #14b8a6);
      border-color: rgba(15, 118, 110, 0.72);
      color: #ffffff;
    }

    .appShell .orderInventoryDropdown{
      border-color: rgba(148, 163, 184, 0.52);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
    }

    .appShell .orderInventoryOption:hover{
      background: rgba(240, 249, 255, 0.8);
    }

    .appShell .orderInventoryOption.selected{
      background: rgba(224, 242, 254, 0.82);
      outline-color: rgba(14, 165, 233, 0.35);
    }

    .appShell .driveBreadcrumb{
      border: 1px dashed rgba(148, 163, 184, 0.52);
      background: rgba(248, 250, 252, 0.9);
      border-radius: 12px;
    }

    .appShell .driveBreadcrumb button{
      border-color: rgba(148, 163, 184, 0.5);
      background: #ffffff;
      color: #0f172a;
    }

    .appShell .driveKind{
      border-color: rgba(148, 163, 184, 0.5);
      background: rgba(241, 245, 249, 0.92);
      color: #334155;
    }

    .appShell .driveKind.folder{
      border-color: rgba(245, 158, 11, 0.45);
      background: rgba(255, 247, 237, 0.94);
      color: #92400e;
    }

    .appShell .driveKind.file{
      border-color: rgba(14, 165, 233, 0.4);
      background: rgba(224, 242, 254, 0.9);
      color: #075985;
    }

    .appShell .hrStat{
      border-color: rgba(148, 163, 184, 0.44);
      background: rgba(248, 250, 252, 0.94);
    }

    .appShell .appNotificationsSection{
      border-radius: 20px;
      border-color: rgba(148, 163, 184, 0.4);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9));
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .appShell .appNotifUnreadBadge{
      background: rgba(254, 226, 226, 0.96);
      border-color: rgba(220, 38, 38, 0.4);
      color: #991b1b;
    }

    .appShell .modalBackdrop{
      background: rgba(15, 23, 42, 0.44);
      backdrop-filter: blur(4px);
    }

    .appShell .modal{
      border-radius: 24px;
      border: 1px solid rgba(148, 163, 184, 0.34);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.98));
      box-shadow: 0 34px 80px rgba(15, 23, 42, 0.24);
    }

    .appShell .modalHead,
    .appShell .modalFoot{
      background: rgba(255, 255, 255, 0.9);
      border-color: rgba(203, 213, 225, 0.72);
    }

    .appShell .modalHead h2{
      font-family: var(--font-figma);
      font-size: 15px;
      color: #0f172a;
    }

    .appShell .field{
      border: 1px solid rgba(148, 163, 184, 0.38);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .appShell .fieldTitle strong{
      color: #0f172a;
    }

    .appShell .hint,
    .appShell .smallNote,
    .appShell .label,
    .appShell .sub,
    .appShell .miniRow,
    .appShell .taskMeta,
    .appShell .expenseMeta,
    .appShell .hrAttendanceMeta,
    .appShell .driveMeta,
    .appShell .appNotifMeta,
    .appShell .appNotifDate{
      color: #64748b;
    }

    .appShell .tasksWarning,
    .appShell .expensesWarning,
    .appShell .collectionsWarning,
    .appShell .inventoryWarning,
    .appShell .driveWarning,
    .appShell .hrWarning{
      border: 1px solid rgba(220, 38, 38, 0.35);
      background: rgba(254, 242, 242, 0.95);
      color: #991b1b;
      border-radius: 12px;
    }

    .appShell .tasksEmpty,
    .appShell .expensesEmpty,
    .appShell .collectionsEmpty,
    .appShell .inventoryEmpty,
    .appShell .driveEmpty,
    .appShell .hrAttendanceEmpty{
      color: #64748b;
    }

    .appShell .toast{
      border-radius: 14px;
      border-color: rgba(148, 163, 184, 0.45);
      background: rgba(255, 255, 255, 0.94);
      color: #0f172a;
      box-shadow: var(--shadow);
    }

    .appShell .appSignature{
      color: #64748b;
      letter-spacing: 0.2px;
      font-size: 12px;
    }

    @media (max-width: 1100px){
      .appShell .topbar{
        border-radius: 18px;
      }
    }

    @media (max-width: 900px){
      .appShell .tasksSection,
      .appShell .expensesSection,
      .appShell .collectionsSection,
      .appShell .inventorySection,
      .appShell .driveSection,
      .appShell .hrSection{
        border-radius: 20px;
      }
    }

    @media (max-width: 620px){
      .appShell .monthlyTicker{
        border-radius: 0 0 16px 16px;
      }

      .appShell .topbar{
        margin-top: 8px;
        margin-bottom: 8px;
        border-radius: 16px;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
      }

      .appShell .searchWrap{
        padding: 6px;
        border-radius: 12px;
      }

      .appShell .col{
        border-radius: 14px;
      }

      .appShell .tasksSection,
      .appShell .financeTabs,
      .appShell .expensesSection,
      .appShell .collectionsSection,
      .appShell .inventorySection,
      .appShell .driveSection,
      .appShell .hrSection{
        border-radius: 16px;
      }

      .appShell .taskComposer,
      .appShell .taskListWrap,
      .appShell .expenseFormCard,
      .appShell .expenseListWrap,
      .appShell .collectionFormCard,
      .appShell .collectionListWrap,
      .appShell .inventoryFormCard,
      .appShell .inventoryListWrap,
      .appShell .driveComposerCard,
      .appShell .driveListWrap,
      .appShell .hrActionCard,
      .appShell .hrScheduleCard,
      .appShell .hrReportCard,
      .appShell .appNotificationsBody{
        border-radius: 14px;
      }

      .appShell .modal{
        border-radius: 16px;
      }
    }

    /* User-requested modern theme (design-only, no behavior changes) */
    :root{
      --primary: #6366f1;
      --primary-2: #8b5cf6;
      --bg-main: #f8f9fc;
      --card-bg: #ffffff;
      --border-soft: #e2e8f0;
      --text-main: #1e293b;
      --text-muted: #64748b;
      --ok: #10b981;
      --danger: #ef4444;
      --warn-amber: #f59e0b;
      --blue: #3b82f6;
      --radius-card: 12px;
      --radius-btn: 8px;
      --card-shadow: 0 1px 3px rgba(0,0,0,0.1);
      --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.15);
    }

    .appShell{
      background: var(--bg-main);
      color: var(--text-main);
      font-size: 14px;
      line-height: 1.6;
      font-family: var(--font-figma);
    }

    .appShell *{
      transition: all 0.3s ease;
    }

    .appShell header{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(6px);
    }

    .appShell .topbar{
      background: transparent;
      max-width: 1320px;
      padding: 18px 18px 16px;
      gap: 14px;
      margin: 0 auto;
    }

    .appShell .monthlyTicker{
      border-top: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.28);
      background: rgba(255, 255, 255, 0.14);
      max-width: 1320px;
      padding: 10px 18px;
    }

    .appShell .monthlyTickerLabel{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-color: rgba(255, 255, 255, 0.35);
      color: #ffffff;
      border-radius: 999px;
    }

    .appShell .monthlyTickerViewport{
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-radius: 10px;
    }

    .appShell .monthlyTickerItem{
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      color: #312e81;
    }

    .appShell h1{
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .appShell h1::before{
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 4px;
      background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 100%);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
      flex: 0 0 auto;
    }

    .appShell .tasksTitleWrap h2,
    .appShell .modalHead h2{
      font-size: 18px;
      font-weight: 500;
      color: var(--text-main);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .appShell .tasksTitleWrap h2::before,
    .appShell .modalHead h2::before{
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 3px;
      background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
      flex: 0 0 auto;
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.16);
    }

    .appShell .tasksTitleWrap p,
    .appShell .smallNote,
    .appShell .sub,
    .appShell .label,
    .appShell .hint{
      color: var(--text-muted);
    }

    .appShell .container{
      max-width: 1320px;
      padding: 20px 18px 24px;
    }

    .appShell .searchWrap{
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.34);
      border-radius: 12px;
      padding: 8px;
    }

    .appShell #currentUser{
      color: #ffffff !important;
      font-weight: 600 !important;
      padding: 6px 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.28);
    }

    .appShell input,
    .appShell select,
    .appShell textarea{
      border: 1px solid var(--border-soft);
      background: #ffffff;
      color: var(--text-main);
      border-radius: 8px;
      font-size: 14px;
      padding: 10px 12px;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
    }

    .appShell input:focus,
    .appShell select:focus,
    .appShell textarea:focus{
      border-color: #a5b4fc;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }

    .appShell .btn{
      border-radius: var(--radius-btn);
      padding: 10px 20px;
      border: 1px solid var(--border-soft);
      background: #f1f5f9;
      color: var(--primary);
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .appShell .btn:not(.notifBellBtn):not(.sectionToggleBtn)::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: currentColor;
      opacity: 0.55;
      flex: 0 0 auto;
    }

    .appShell .btn:hover{
      box-shadow: var(--card-shadow-hover);
      filter: brightness(1.03);
      transform: translateY(-1px);
    }

    .appShell .btn.primary{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      color: #ffffff;
      border-color: rgba(99, 102, 241, 0.55);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.32);
    }

    .appShell .btn.primary::before,
    .appShell .btn.linked::before{
      background: #ffffff;
      opacity: 0.9;
    }

    .appShell .btn.linked{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-color: rgba(99, 102, 241, 0.55);
      color: #ffffff;
    }

    .appShell .btn.ghost{
      background: #f8fafc;
      color: #475569;
      border-color: var(--border-soft);
    }

    .appShell .notifBellBtn{
      border-radius: 999px;
      padding: 0;
      border-color: rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.18);
      color: #ffffff;
      box-shadow: none;
    }

    .appShell .appNotifUnreadBadge{
      background: #fee2e2;
      border-color: #fca5a5;
      color: #991b1b;
    }

    .appShell .board{
      gap: 16px;
      margin-top: 4px;
    }

    .appShell .col{
      background: var(--card-bg);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-card);
      box-shadow: var(--card-shadow);
    }

    .appShell .col:hover{
      box-shadow: var(--card-shadow-hover);
    }

    .appShell .colHead{
      padding: 16px;
      border-bottom: 1px solid var(--border-soft);
      background: #ffffff;
    }

    .appShell .colTitle{
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main);
    }

    .appShell .pill{
      font-size: 12px;
      font-weight: 600;
      border-radius: 999px;
      padding: 4px 10px;
      border: 1px solid var(--border-soft);
      background: #f8fafc;
      color: #475569;
    }

    .appShell #count-new{
      background: #dbeafe;
      color: #1e40af;
      border: 1px solid #93c5fd;
    }

    .appShell #count-sent{
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fcd34d;
    }

    .appShell #count-delivered{
      background: #d1fae5;
      color: #065f46;
      border: 1px solid #6ee7b7;
    }

    .appShell #count-returned{
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fca5a5;
    }

    .appShell .col[data-status="new"] .dot{
      background: #3b82f6;
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
    }

    .appShell .col[data-status="sent"] .dot{
      background: #f59e0b;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
    }

    .appShell .col[data-status="delivered"] .dot{
      background: #10b981;
      box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
    }

    .appShell .col[data-status="returned"] .dot{
      background: #ef4444;
      box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
    }

    .appShell .dropzone{
      padding: 14px;
      background: #f8fafc;
    }

    .appShell .dropzone.dragover{
      outline: 2px dashed #818cf8;
      background: #eef2ff;
    }

    .appShell .card,
    .appShell .taskCard,
    .appShell .expenseItem,
    .appShell .collectionItem,
    .appShell .inventoryItem,
    .appShell .driveItem,
    .appShell .hrAttendanceItem,
    .appShell .appNotifItem{
      background: var(--card-bg);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-card);
      box-shadow: var(--card-shadow);
      padding: 20px;
      color: var(--text-main);
    }

    .appShell .card:hover,
    .appShell .taskCard:hover,
    .appShell .expenseItem:hover,
    .appShell .collectionItem:hover,
    .appShell .inventoryItem:hover,
    .appShell .driveItem:hover,
    .appShell .hrAttendanceItem:hover,
    .appShell .appNotifItem:hover{
      box-shadow: var(--card-shadow-hover);
      transform: translateY(-2px);
    }

    .appShell .badge{
      border: 1px solid var(--border-soft);
      background: #f8fafc;
      color: var(--text-muted);
    }

    .appShell .tasksSection,
    .appShell .expensesSection,
    .appShell .collectionsSection,
    .appShell .inventorySection,
    .appShell .driveSection,
    .appShell .hrSection,
    .appShell .appNotificationsSection,
    .appShell .financeTabs{
      background: var(--card-bg);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-card);
      box-shadow: var(--card-shadow);
      padding: 20px;
      margin-top: 20px;
    }

    .appShell .tasksHead{
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-soft);
    }

    .appShell .taskComposer,
    .appShell .taskListWrap,
    .appShell .expenseFormCard,
    .appShell .expenseListWrap,
    .appShell .collectionFormCard,
    .appShell .collectionListWrap,
    .appShell .inventoryFormCard,
    .appShell .inventoryListWrap,
    .appShell .driveComposerCard,
    .appShell .driveListWrap,
    .appShell .hrActionCard,
    .appShell .hrScheduleCard,
    .appShell .hrReportCard,
    .appShell .appNotificationsBody{
      background: #ffffff;
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-card);
      box-shadow: var(--card-shadow);
      padding: 20px;
    }

    .appShell .taskStatus.pending{
      border: 1px solid #fcd34d;
      color: #92400e;
      background: #fef3c7;
    }

    .appShell .taskStatus.completed{
      border: 1px solid #6ee7b7;
      color: #065f46;
      background: #d1fae5;
    }

    .appShell .financialStat,
    .appShell .hrStat,
    .appShell .expenseTotal{
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.1) 100%);
      border: 1px solid rgba(99, 102, 241, 0.24);
      border-radius: 12px;
      box-shadow: var(--card-shadow);
    }

    .appShell .financialStat .label,
    .appShell .hrStat .label{
      color: #4c1d95;
      font-weight: 500;
    }

    .appShell .financialStat .value,
    .appShell .hrStat .value,
    .appShell .expenseTotal{
      color: #4338ca;
      font-weight: 700;
    }

    .appShell .financialStat .value.neg{
      color: #b91c1c;
    }

    .appShell .expenseAmount{
      color: #b91c1c;
    }

    .appShell .collectionAmount{
      color: #047857;
    }

    .appShell .tasksWarning,
    .appShell .expensesWarning,
    .appShell .collectionsWarning,
    .appShell .inventoryWarning,
    .appShell .driveWarning,
    .appShell .hrWarning{
      border: 1px solid #fecaca;
      background: #fef2f2;
      color: #991b1b;
      border-radius: 10px;
    }

    .appShell .inventoryTabBtn.active,
    .appShell .financeTabBtn.active,
    .appShell .sidebarNav .btn.active{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-color: rgba(99, 102, 241, 0.55);
      color: #ffffff;
    }

    .appShell .modalBackdrop{
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(8px);
    }

    .appShell .modal{
      background: #ffffff;
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
    }

    .appShell .modalHead,
    .appShell .modalFoot{
      background: #ffffff;
      border-color: var(--border-soft);
    }

    .appShell .field{
      background: #ffffff;
      border: 1px solid var(--border-soft);
      border-radius: 12px;
      padding: 20px;
      box-shadow: var(--card-shadow);
    }

    .appShell .toast{
      background: #ffffff;
      border: 1px solid var(--border-soft);
      border-radius: 10px;
      box-shadow: var(--card-shadow-hover);
      color: var(--text-main);
    }

    .appShell .appSignature{
      color: var(--text-muted);
      font-size: 14px;
      padding-top: 10px;
    }

    @media (max-width: 900px){
      .appShell .tasksSection,
      .appShell .expensesSection,
      .appShell .collectionsSection,
      .appShell .inventorySection,
      .appShell .driveSection,
      .appShell .hrSection,
      .appShell .financeTabs{
        padding: 16px;
      }

      .appShell .taskComposer,
      .appShell .taskListWrap,
      .appShell .expenseFormCard,
      .appShell .expenseListWrap,
      .appShell .collectionFormCard,
      .appShell .collectionListWrap,
      .appShell .inventoryFormCard,
      .appShell .inventoryListWrap,
      .appShell .driveComposerCard,
      .appShell .driveListWrap,
      .appShell .hrActionCard,
      .appShell .hrScheduleCard,
      .appShell .hrReportCard,
      .appShell .appNotificationsBody,
      .appShell .card,
      .appShell .taskCard,
      .appShell .expenseItem,
      .appShell .collectionItem,
      .appShell .inventoryItem,
      .appShell .driveItem,
      .appShell .hrAttendanceItem,
      .appShell .appNotifItem,
      .appShell .field{
        padding: 16px;
      }
    }

    @media (max-width: 620px){
      .appShell .topbar{
        padding: 12px;
      }

      .appShell h1{
        font-size: 20px;
      }

      .appShell .tasksTitleWrap h2,
      .appShell .modalHead h2{
        font-size: 17px;
      }

      .appShell .tasksSection,
      .appShell .expensesSection,
      .appShell .collectionsSection,
      .appShell .inventorySection,
      .appShell .driveSection,
      .appShell .hrSection,
      .appShell .financeTabs{
        padding: 12px;
      }

      .appShell .btn{
        padding: 10px 14px;
      }
    }

    /* Radical visual overhaul */
    :root{
      --radial-primary: #6366f1;
      --radial-secondary: #8b5cf6;
      --radial-bg: #edf1ff;
      --radial-panel: rgba(255, 255, 255, 0.94);
      --radial-border: rgba(99, 102, 241, 0.18);
      --radial-text: #1e293b;
      --radial-muted: #64748b;
      --radial-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
      --radial-shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.1);
    }

    .appShell{
      background:
        radial-gradient(1000px 620px at 105% -10%, rgba(99, 102, 241, 0.22), transparent 58%),
        radial-gradient(900px 540px at -5% 20%, rgba(139, 92, 246, 0.2), transparent 62%),
        linear-gradient(180deg, #f4f6ff 0%, #eef2ff 36%, #f8f9fc 100%);
      color: var(--radial-text);
    }

    .appShell header{
      border: 0;
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      box-shadow: 0 20px 40px rgba(99, 102, 241, 0.22);
      backdrop-filter: saturate(120%) blur(6px);
    }

    .appShell .monthlyTicker{
      max-width: 1320px;
      padding: 10px 18px;
      background: rgba(255, 255, 255, 0.12);
      border-top: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    }

    .appShell .monthlyTickerLabel{
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.3);
      color: #ffffff;
      box-shadow: none;
    }

    .appShell .monthlyTickerViewport{
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.66);
    }

    .appShell .topbar{
      max-width: 1320px;
      padding: 16px 18px;
      margin: 0 auto;
      background: transparent;
      border: 0;
      box-shadow: none;
      border-radius: 0;
    }

    .appShell .brand h1{
      color: #ffffff;
      text-shadow: 0 2px 10px rgba(49, 46, 129, 0.35);
    }

    .appShell .brand h1::before{
      background: linear-gradient(135deg, #ffffff, #e0e7ff);
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
    }

    .appShell .searchWrap{
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 14px;
    }

    .appShell #currentUser{
      color: #ffffff !important;
      border: 1px solid rgba(255, 255, 255, 0.32);
      background: rgba(255, 255, 255, 0.14);
      border-style: solid;
    }

    .appShell .actions > .btn{
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.34);
      color: #ffffff;
      box-shadow: none;
    }

    .appShell .actions > .btn.primary{
      background: rgba(17, 24, 39, 0.22);
      border-color: rgba(255, 255, 255, 0.36);
    }

    .appShell .actions > .btn:hover{
      background: rgba(255, 255, 255, 0.28);
      color: #ffffff;
    }

    .appShell .notifBellBtn{
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.4);
      color: #ffffff;
    }

    .viewDock{
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 18px 14px;
      display: flex;
      gap: 10px;
      align-items: center;
      overflow-x: auto;
      scrollbar-width: thin;
    }

    .viewDockBtn{
      border: 1px solid rgba(255, 255, 255, 0.34);
      background: rgba(255, 255, 255, 0.16);
      color: #ffffff;
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.28s ease;
      min-height: 42px;
      box-shadow: 0 8px 20px rgba(49, 46, 129, 0.2);
    }

    .viewDockIcon{
      font-size: 14px;
      line-height: 1;
      filter: saturate(1.2);
    }

    .viewDockBtn:hover{
      background: rgba(255, 255, 255, 0.26);
      transform: translateY(-1px);
    }

    .viewDockBtn.active{
      background: #ffffff;
      color: #4338ca;
      border-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 10px 24px rgba(49, 46, 129, 0.24);
    }

    .appShell .container{
      max-width: 1320px;
      padding: 22px 18px 34px;
    }

    .appShell .board{
      gap: 16px;
    }

    .appShell .col{
      background: var(--radial-panel);
      border: 1px solid var(--radial-border);
      border-radius: 20px;
      box-shadow: var(--radial-shadow-soft);
      overflow: hidden;
    }

    .appShell .colHead{
      border-bottom: 1px solid rgba(99, 102, 241, 0.12);
      padding: 14px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 255, 0.92));
    }

    .appShell .dropzone{
      background: linear-gradient(180deg, rgba(248, 250, 255, 0.85), rgba(241, 245, 255, 0.65));
      min-height: 240px;
    }

    .appShell .tasksSection,
    .appShell .expensesSection,
    .appShell .collectionsSection,
    .appShell .inventorySection,
    .appShell .driveSection,
    .appShell .hrSection,
    .appShell .financeTabs{
      background: var(--radial-panel);
      border: 1px solid var(--radial-border);
      border-radius: 22px;
      box-shadow: var(--radial-shadow);
      padding: 18px;
      margin-top: 20px;
      position: relative;
      overflow: hidden;
    }

    .appShell .tasksSection::before,
    .appShell .expensesSection::before,
    .appShell .collectionsSection::before,
    .appShell .inventorySection::before,
    .appShell .driveSection::before,
    .appShell .hrSection::before{
      content: "";
      position: absolute;
      top: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      height: 4px;
      background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
      opacity: 0.9;
    }

    .appShell .tasksHead{
      border-bottom: 1px solid rgba(99, 102, 241, 0.14);
      padding-bottom: 12px;
      margin-bottom: 14px;
    }

    .appShell .tasksTitleWrap h2{
      color: var(--radial-text);
      font-size: 19px;
      font-weight: 700;
    }

    .appShell .tasksTitleWrap p{
      color: var(--radial-muted);
    }

    .appShell .taskComposer,
    .appShell .taskListWrap,
    .appShell .expenseFormCard,
    .appShell .expenseListWrap,
    .appShell .collectionFormCard,
    .appShell .collectionListWrap,
    .appShell .inventoryFormCard,
    .appShell .inventoryListWrap,
    .appShell .driveComposerCard,
    .appShell .driveListWrap,
    .appShell .hrActionCard,
    .appShell .hrScheduleCard,
    .appShell .hrReportCard,
    .appShell .appNotificationsBody{
      border: 1px solid rgba(99, 102, 241, 0.16);
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
      padding: 14px;
    }

    .appShell .card,
    .appShell .taskCard,
    .appShell .expenseItem,
    .appShell .collectionItem,
    .appShell .inventoryItem,
    .appShell .driveItem,
    .appShell .hrAttendanceItem,
    .appShell .appNotifItem{
      border-radius: 14px;
      border: 1px solid rgba(99, 102, 241, 0.14);
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
      padding: 14px;
    }

    .appShell .card:hover,
    .appShell .taskCard:hover,
    .appShell .expenseItem:hover,
    .appShell .collectionItem:hover,
    .appShell .inventoryItem:hover,
    .appShell .driveItem:hover,
    .appShell .hrAttendanceItem:hover,
    .appShell .appNotifItem:hover{
      transform: translateY(-3px);
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
    }

    .appShell .financeTabs{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 10px;
    }

    .appShell .financeTabBtn{
      border-radius: 12px;
      min-height: 42px;
    }

    .appShell .sidebarPanel{
      background:
        radial-gradient(420px 220px at 100% 0, rgba(99, 102, 241, 0.4), transparent 60%),
        linear-gradient(180deg, #1e1b4b 0%, #312e81 48%, #312e81 100%);
      border-left: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: -20px 0 50px rgba(15, 23, 42, 0.4);
      padding: 16px 14px;
    }

    .appShell .sidebarHead{
      border-bottom-color: rgba(255, 255, 255, 0.2);
    }

    .appShell .sidebarTitle{
      color: #ffffff;
      font-size: 16px;
    }

    .appShell .sidebarSub{
      color: rgba(226, 232, 240, 0.86);
      font-size: 12px;
    }

    .appShell .sidebarNav .btn{
      justify-content: flex-start;
      width: 100%;
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
      color: #e2e8f0;
      min-height: 44px;
      border-radius: 12px;
      box-shadow: none;
    }

    .appShell .sidebarNav .btn:hover{
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.34);
      color: #ffffff;
    }

    .appShell .sidebarNav .btn.active{
      background: #ffffff;
      color: #4338ca;
      border-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
    }

    .appShell .appNotificationsSection{
      border-radius: 16px;
      border: 1px solid rgba(99, 102, 241, 0.18);
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
      background: #ffffff;
    }

    .appShell .modalBackdrop{
      background: rgba(15, 23, 42, 0.52);
      backdrop-filter: blur(10px);
    }

    .appShell .modal{
      border-radius: 18px;
      border: 1px solid rgba(99, 102, 241, 0.18);
      box-shadow: 0 24px 48px rgba(15, 23, 42, 0.24);
    }

    .appShell .modalHead h2,
    .appShell .tasksTitleWrap h2{
      letter-spacing: 0.1px;
    }

    @media (max-width: 980px){
      .viewDock{
        padding-bottom: 12px;
      }
      .viewDockBtn{
        min-height: 40px;
        padding: 9px 12px;
        font-size: 12.5px;
      }
    }

    @media (max-width: 620px){
      .viewDock{
        display: none;
      }
      .appShell .monthlyTicker{
        padding: 8px 10px;
      }
      .appShell .topbar{
        padding: 10px;
      }
      .appShell .tasksSection,
      .appShell .expensesSection,
      .appShell .collectionsSection,
      .appShell .inventorySection,
      .appShell .driveSection,
      .appShell .hrSection,
      .appShell .financeTabs{
        border-radius: 16px;
        padding: 12px;
      }
    }

    /* Screenshot-inspired final skin */
    :root{
      --shot-primary: #6366f1;
      --shot-primary-2: #8b5cf6;
      --shot-bg: #f3f5f9;
      --shot-card: #ffffff;
      --shot-border: #e2e8f0;
      --shot-text: #1e293b;
      --shot-muted: #64748b;
      --shot-soft: #eef2ff;
    }

    .appShell{
      background: var(--shot-bg);
      color: var(--shot-text);
      font-family: var(--font-figma);
    }

    .appShell header{
      background: #ffffff;
      border-bottom: 1px solid var(--shot-border);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      position: sticky;
      top: 0;
      z-index: 85;
    }

    .appShell .topbar{
      max-width: 1360px;
      margin: 0 auto;
      padding: 12px 16px;
      background: transparent;
      border: 0;
      box-shadow: none;
      border-radius: 0;
      gap: 10px;
    }

    .appShell .brand{
      gap: 10px;
    }

    .appShell .logo{
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 1px solid #dbe1ee;
      box-shadow: none;
      overflow: hidden;
    }

    .appShell .brand h1{
      margin: 0;
      color: #0f172a;
      font-size: 30px;
      line-height: 1;
      letter-spacing: 0;
      text-shadow: none;
    }

    .appShell .brand h1::before{
      display: none;
    }

    .appShell .actions{
      gap: 8px;
      flex: 1 1 auto;
      justify-content: flex-start;
    }

    .appShell .actionsQuick{
      order: -1;
      gap: 6px;
    }

    .appShell .searchWrap{
      background: #f8fafc;
      border: 1px solid #e5eaf3;
      border-radius: 12px;
      padding: 6px;
      gap: 6px;
    }

    .appShell input,
    .appShell select,
    .appShell textarea{
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      color: var(--shot-text);
      font-size: 14px;
      padding: 10px 12px;
      box-shadow: none;
    }

    .appShell input:focus,
    .appShell select:focus,
    .appShell textarea:focus{
      border-color: #c7d2fe;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    }

    .appShell .btn{
      border-radius: 10px;
      border: 1px solid #dce3ef;
      background: #ffffff;
      color: #334155;
      box-shadow: none;
      padding: 10px 14px;
      font-weight: 700;
    }

    .appShell .btn::before{
      display: none;
    }

    .appShell .btn:hover{
      border-color: #c9d4e5;
      background: #f8fafc;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
    }

    .appShell .btn.primary,
    .appShell .btn.linked{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-color: rgba(99, 102, 241, 0.5);
      color: #ffffff;
      box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
    }

    .appShell #currentUser{
      color: #334155 !important;
      background: #f1f5ff;
      border: 1px solid #dbe4ff;
      border-radius: 12px;
      padding: 8px 10px;
    }

    .appShell .notifBellBtn{
      background: #ffffff;
      color: #334155;
      border: 1px solid #dde3f1;
    }

    .appShell .monthlyTicker{
      max-width: 1360px;
      margin: 0 auto;
      padding: 12px 16px;
      border: 0;
      background: transparent;
    }

    .appShell .monthlyTickerViewport{
      min-height: 96px;
      border-radius: 18px;
      border: 1px solid #e7e2f8;
      background: #ece8f8;
      padding: 14px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    .appShell .monthlyTickerLabel{
      background: transparent;
      color: #667085;
      border: 0;
      box-shadow: none;
      font-size: 13px;
      font-weight: 700;
      padding: 0;
      margin-inline-start: auto;
      align-self: flex-start;
    }

    .appShell .monthlyTickerItem{
      background: #f5f3ff;
      border: 1px solid #ddd6fe;
      color: #5b21b6;
      border-radius: 999px;
    }

    .viewDock{
      display: none !important;
    }

    .appLayout{
      max-width: 1360px;
      margin: 0 auto;
      padding: 14px 16px 18px;
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .appShell .container{
      flex: 1 1 auto;
      max-width: none;
      margin: 0;
      padding: 0;
    }

    .appShell .sidebarBackdrop{
      flex: 0 0 286px;
      position: sticky;
      inset: auto;
      top: 116px;
      height: auto;
      pointer-events: auto;
      z-index: 5;
    }

    .appShell .sidebarShade{
      display: none;
    }

    .appShell .sidebarPanel{
      position: static;
      transform: none;
      width: 100%;
      height: auto;
      max-height: calc(100dvh - 132px);
      overflow: auto;
      border-radius: 16px;
      border: 1px solid var(--shot-border);
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
      padding: 14px 10px;
      gap: 10px;
    }

    .appShell .sidebarHead{
      border-bottom: 0;
      padding: 0 6px 8px;
    }

    .appShell .sidebarTitle{
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
    }

    .appShell #closeSidebarBtn{
      display: none;
    }

    .appShell .sidebarSub{
      display: none;
    }

    .appShell .sidebarSectionLabel{
      font-size: 12px;
      color: #94a3b8;
      font-weight: 700;
      padding: 4px 8px;
      margin: 2px 0 6px;
    }

    .appShell .sidebarNav{
      gap: 4px;
    }

    .appShell .sidebarNav .btn{
      width: 100%;
      justify-content: flex-start;
      min-height: 44px;
      border-radius: 12px;
      border: 1px solid transparent;
      background: transparent;
      color: #0f172a;
      box-shadow: none;
      font-size: 16px;
      padding: 10px 12px;
      font-weight: 700;
    }

    .appShell .sidebarNav .btn:hover{
      background: #f8fafc;
      border-color: #e2e8f0;
      color: #0f172a;
      transform: none;
      box-shadow: none;
    }

    .appShell .sidebarNav .btn.active{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-color: rgba(99, 102, 241, 0.42);
      color: #ffffff;
      box-shadow: 0 8px 18px rgba(99, 102, 241, 0.3);
    }

    .appShell .sidebarNavTools{
      margin-top: 10px;
      padding-top: 12px;
      border-top: 1px solid var(--shot-border);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .appShell .sidebarNavTools .btn{
      width: 100%;
      justify-content: flex-start;
      min-height: 42px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      color: #1f2937;
      box-shadow: none;
      font-size: 15px;
      font-weight: 700;
      padding: 9px 12px;
    }

    .appShell .sidebarNavTools .btn:hover{
      background: #f8fafc;
      border-color: #e2e8f0;
      box-shadow: none;
      transform: none;
    }

    .appShell .board{
      gap: 12px;
    }

    .appShell .col{
      border-radius: 14px;
      border: 1px solid var(--shot-border);
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }

    .appShell .colHead{
      border-bottom: 1px solid #eef2f7;
      background: #ffffff;
      padding: 12px;
    }

    .appShell .dropzone{
      background: #f8fafc;
      min-height: 220px;
    }

    .appShell .tasksSection,
    .appShell .expensesSection,
    .appShell .collectionsSection,
    .appShell .inventorySection,
    .appShell .driveSection,
    .appShell .hrSection,
    .appShell .financeTabs{
      border-radius: 14px;
      border: 1px solid var(--shot-border);
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      padding: 14px;
      margin-top: 12px;
      overflow: hidden;
    }

    .appShell .tasksSection::before,
    .appShell .expensesSection::before,
    .appShell .collectionsSection::before,
    .appShell .inventorySection::before,
    .appShell .driveSection::before,
    .appShell .hrSection::before{
      display: none;
    }

    .appShell .tasksHead{
      border-bottom: 1px solid #eef2f7;
      padding-bottom: 10px;
      margin-bottom: 12px;
    }

    .appShell .tasksTitleWrap h2{
      font-size: 20px;
      font-weight: 700;
      color: #0f172a;
    }

    .appShell .tasksTitleWrap p{
      color: #64748b;
      font-size: 12px;
    }

    .appShell .taskComposer,
    .appShell .taskListWrap,
    .appShell .expenseFormCard,
    .appShell .expenseListWrap,
    .appShell .collectionFormCard,
    .appShell .collectionListWrap,
    .appShell .inventoryFormCard,
    .appShell .inventoryListWrap,
    .appShell .driveComposerCard,
    .appShell .driveListWrap,
    .appShell .hrActionCard,
    .appShell .hrScheduleCard,
    .appShell .hrReportCard,
    .appShell .appNotificationsBody{
      border-radius: 12px;
      border: 1px solid #e8edf5;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      padding: 12px;
    }

    .appShell .card,
    .appShell .taskCard,
    .appShell .expenseItem,
    .appShell .collectionItem,
    .appShell .inventoryItem,
    .appShell .driveItem,
    .appShell .hrAttendanceItem,
    .appShell .appNotifItem{
      border-radius: 12px;
      border: 1px solid #e8edf5;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      padding: 12px;
    }

    .appShell .card:hover,
    .appShell .taskCard:hover,
    .appShell .expenseItem:hover,
    .appShell .collectionItem:hover,
    .appShell .inventoryItem:hover,
    .appShell .driveItem:hover,
    .appShell .hrAttendanceItem:hover,
    .appShell .appNotifItem:hover{
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
      transform: translateY(-2px);
    }

    .appShell .appNotificationsSection{
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
      background: #ffffff;
    }

    .appShell .modalBackdrop{
      backdrop-filter: blur(8px);
      background: rgba(15, 23, 42, 0.46);
    }

    .appShell .modal{
      border-radius: 14px;
      border: 1px solid #e2e8f0;
    }

    @media (max-width: 1140px){
      .appShell .appLayout{
        gap: 12px;
      }
      .appShell .sidebarBackdrop{
        flex-basis: 256px;
      }
      .appShell .sidebarNav .btn{
        font-size: 16px;
      }
      .appShell .sidebarNavTools .btn{
        font-size: 14px;
      }
      .appShell .brand h1{
        font-size: 28px;
      }
    }

    @media (max-width: 960px){
      .appShell .appLayout{
        display: block;
        max-width: none;
        margin: 0;
        padding: 0;
      }

      .appShell .container{
        padding: 10px;
      }

      .appShell .sidebarBackdrop{
        position: fixed;
        inset: 0;
        z-index: 70;
        flex: none;
        pointer-events: none;
      }

      .appShell .sidebarBackdrop.open{
        pointer-events: auto;
      }

      .appShell .sidebarShade{
        display: block;
      }

      .appShell .sidebarPanel{
        position: absolute;
        top: 0;
        right: 0;
        width: min(340px, 92vw);
        height: 100%;
        max-height: none;
        transform: translateX(105%);
        border-radius: 0;
        border-left: 1px solid #e2e8f0;
        border-right: 0;
        box-shadow: -16px 0 32px rgba(15, 23, 42, 0.22);
      }

      .appShell .sidebarBackdrop.open .sidebarPanel{
        transform: translateX(0);
      }

      .appShell #closeSidebarBtn{
        display: inline-flex;
      }
    }

    @media (max-width: 620px){
      .appShell .topbar{
        padding: 10px 10px 8px;
      }

      .appShell .brand h1{
        font-size: 24px;
      }

      .appShell .monthlyTicker{
        padding: 8px 10px;
      }

      .appShell .monthlyTickerViewport{
        min-height: 84px;
      }
    }

    /* Figma parity skin v2 (final visual override) */
    :root{
      --ui-primary: #6366f1;
      --ui-primary-2: #8b5cf6;
      --ui-bg: #f8f9fc;
      --ui-card: #ffffff;
      --ui-border: #e2e8f0;
      --ui-text: #1e293b;
      --ui-muted: #64748b;
      --ui-success: #10b981;
      --ui-danger: #ef4444;
      --ui-warning: #f59e0b;
      --ui-info: #3b82f6;
      --ui-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      --ui-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
      --ui-radius-card: 12px;
      --ui-radius-btn: 8px;
      --ui-transition: all 0.3s ease;
    }

    .appShell{
      background: var(--ui-bg);
      color: var(--ui-text);
      font-family: var(--font-figma);
    }

    .appShell *,
    .appShell *::before,
    .appShell *::after{
      transition: var(--ui-transition);
    }

    .appShell header{
      display: flex;
      flex-direction: column-reverse;
      background: #ffffff;
      border-bottom: 1px solid var(--ui-border);
      box-shadow: var(--ui-shadow);
      position: sticky;
      top: 0;
      z-index: 90;
    }

    .appShell .topbar{
      max-width: 1380px;
      margin: 0 auto;
      width: 100%;
      padding: 14px 18px;
      gap: 12px;
      align-items: center;
    }

    .appShell .brandMain{
      gap: 12px;
      min-width: 0;
    }

    .appShell .logo{
      width: 52px;
      height: 52px;
      border-radius: 16px;
      border: 1px solid #d5dcf0;
      box-shadow: var(--ui-shadow);
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(139, 92, 246, 0.18));
    }

    .appShell .brandTitle{
      margin: 0;
      color: #0f172a;
      font-size: 42px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.01em;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .appShell .brandTitle::after{
      content: "Love and Fun";
      font-size: 20px;
      font-weight: 500;
      line-height: 1;
      color: #94a3b8;
    }

    .appShell .headerActions{
      flex: 1 1 auto;
      justify-content: flex-start;
      gap: 8px;
    }

    .appShell .actionsQuick{
      order: -1;
      gap: 6px;
    }

    .appShell .burgerBtn{
      min-width: 44px;
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 10px;
      font-size: 0;
      justify-content: center;
    }

    .appShell .burgerBtn::before{
      content: "☰";
      font-size: 20px;
      color: #475569;
      line-height: 1;
    }

    .appShell .notifBellBtn{
      width: 44px;
      min-width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 1px solid var(--ui-border);
      background: #ffffff;
      color: #475569;
      box-shadow: none;
    }

    .appShell #currentUser{
      border: 1px solid #dbe2f3;
      border-radius: 14px;
      background: #f5f7ff;
      color: #334155 !important;
      font-weight: 700;
      padding: 10px 12px;
    }

    .appShell .searchWrap{
      border: 1px solid var(--ui-border);
      border-radius: 14px;
      background: #ffffff;
      box-shadow: var(--ui-shadow);
      padding: 6px;
      gap: 6px;
    }

    .appShell input,
    .appShell select,
    .appShell textarea{
      border: 1px solid var(--ui-border);
      border-radius: 10px;
      background: #ffffff;
      color: var(--ui-text);
      font-size: 14px;
      box-shadow: none;
    }

    .appShell input:focus,
    .appShell select:focus,
    .appShell textarea:focus{
      outline: 0;
      border-color: #c7d2fe;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }

    .appShell .btn{
      border-radius: var(--ui-radius-btn);
      border: 1px solid #d8dfed;
      background: #f8fafc;
      color: #334155;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 700;
      box-shadow: none;
    }

    .appShell .btn:hover{
      box-shadow: var(--ui-shadow-hover);
      border-color: #c4d0e5;
      filter: brightness(0.99);
      transform: translateY(-1px);
    }

    .appShell .btn.primary,
    .appShell .btn.linked{
      border-color: rgba(99, 102, 241, 0.45);
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      color: #ffffff;
      box-shadow: 0 10px 22px rgba(99, 102, 241, 0.25);
    }

    .appShell #newTicketBtn::before{
      content: "＋";
      font-weight: 900;
      margin-inline-end: 4px;
    }

    .appShell .actions > .btn.ghost[onclick="signOut()"]::before{
      content: "↩";
      margin-inline-end: 6px;
      font-size: 15px;
      color: #64748b;
    }

    .appShell .monthlyTicker{
      max-width: 1380px;
      margin: 0 auto;
      width: 100%;
      padding: 0 18px 14px;
      background: transparent;
      border: 0;
    }

    .appShell .monthlyTickerLabel{
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 8px;
      background: transparent;
      border: 0;
      box-shadow: none;
      padding: 0;
    }

    .appShell .monthlyTickerViewport{
      min-height: 96px;
      border-radius: 18px;
      border: 1px solid #e4defa;
      background: #ede9fe;
      box-shadow: var(--ui-shadow);
      padding: 16px;
    }

    .appShell .monthlyTickerItem{
      border-radius: 999px;
      border: 1px solid #d8d2fb;
      background: #f5f3ff;
      color: #5b21b6;
      font-size: 14px;
      padding: 8px 12px;
    }

    .appShell .monthlyTickerEmpty{
      color: #6b7280;
      font-size: 14px;
    }

    .appShell .viewDock{
      display: none !important;
    }

    .appShell .appLayout{
      max-width: 1380px;
      margin: 0 auto;
      width: 100%;
      padding: 16px 18px 20px;
      display: grid;
      grid-template-columns: 0 minmax(0, 1fr);
      gap: 18px;
      align-items: start;
      transition: grid-template-columns .24s ease;
    }

    .appShell.sidebar-open .appLayout{
      grid-template-columns: 304px minmax(0, 1fr);
    }

    .appShell .container{
      max-width: none;
      margin: 0;
      padding: 0;
    }

    .appShell .sidebarBackdrop{
      position: sticky;
      inset: auto;
      top: 108px;
      height: calc(100dvh - 124px);
      pointer-events: none;
      z-index: 4;
      overflow: hidden;
    }

    .appShell.sidebar-open .sidebarBackdrop{
      pointer-events: auto;
    }

    .appShell .sidebarShade{
      display: none;
    }

    .appShell .sidebarPanel{
      position: static;
      width: 100%;
      height: auto;
      max-height: 100%;
      transform: translateX(18px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      border: 1px solid var(--ui-border);
      border-radius: var(--ui-radius-card);
      background: #ffffff;
      box-shadow: var(--ui-shadow);
      padding: 14px 10px;
      gap: 8px;
      overflow: auto;
      transition: transform .24s ease, opacity .2s ease, visibility .2s ease;
    }

    .appShell.sidebar-open .sidebarPanel{
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .appShell .sidebarHead{
      border-bottom: 0;
      padding: 0;
      margin: 0 0 4px;
      justify-content: flex-start;
      min-height: 0;
    }

    .appShell .sidebarTitle{
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
    }

    .appShell .sidebarSub,
    .appShell #closeSidebarBtn{
      display: none;
    }

    .appShell .sidebarSectionLabel{
      color: #94a3b8;
      font-size: 16px;
      font-weight: 800;
      padding: 6px 12px 10px;
      margin: 0;
      text-align: right;
    }

    .appShell .sidebarNav,
    .appShell .sidebarNavTools{
      gap: 8px;
    }

    .appShell .sidebarNav .btn{
      width: 100%;
      min-height: 60px;
      border-radius: 16px;
      border: 1px solid transparent;
      background: transparent;
      color: #0f172a;
      justify-content: center;
      padding: 12px 18px;
      padding-inline-start: 56px;
      box-shadow: none;
      font-size: 17px;
      font-weight: 700;
      position: relative;
      gap: 0;
      letter-spacing: 0;
    }

    .appShell .sidebarItemText{
      display: block;
      width: 100%;
      text-align: center;
      line-height: 1.3;
    }

    .appShell .sidebarItemIcon{
      position: absolute;
      inset-inline-start: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #334155;
    }

    .appShell .sidebarItemIcon svg{
      width: 22px;
      height: 22px;
      display: block;
    }

    .appShell .sidebarItemIcon svg *{
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .appShell .sidebarItemIconText{
      font-size: 24px;
      font-weight: 700;
      line-height: 1;
      color: #334155;
    }

    .appShell .sidebarNav .navItem::before{
      content: none !important;
      display: none !important;
    }

    .appShell .sidebarNav .btn:hover{
      background: #f8fafc;
      border-color: var(--ui-border);
      box-shadow: none;
      transform: translateY(-1px);
    }

    .appShell .sidebarNav .btn.active{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-color: rgba(99, 102, 241, 0.42);
      color: #ffffff;
      box-shadow: 0 10px 24px rgba(99, 102, 241, 0.28);
    }

    .appShell .sidebarNav .btn.active .sidebarItemIcon{
      color: #ffffff;
    }

    .appShell .sidebarNav .btn.active .sidebarItemIconText{
      color: #ffffff;
    }

    .appShell .sidebarNavTools{
      margin-top: 10px;
      padding-top: 14px;
      border-top: 1px solid var(--ui-border);
      gap: 6px;
    }

    .appShell .sidebarNavTools .btn{
      width: 100%;
      min-height: 46px;
      border-radius: 12px;
      border: 1px solid transparent;
      background: transparent;
      color: #334155;
      justify-content: flex-start;
      padding: 10px 12px;
      box-shadow: none;
      font-size: 15px;
      font-weight: 700;
      gap: 10px;
    }

    .appShell .sidebarNavTools .btn:hover{
      background: #f8fafc;
      border-color: var(--ui-border);
      box-shadow: none;
      transform: none;
    }

    .appShell .navTool::before{
      font-size: 17px;
      line-height: 1;
      color: #64748b;
    }

    .appShell .navToolExport::before{ content: "⇩"; }
    .appShell .navToolImport::before{ content: "⇧"; }
    .appShell .navToolReports::before{ content: "◷"; }

    .appShell .navItemDashboard .sidebarItemIcon{ color: #334155; }
    .appShell .navItemKanban .sidebarItemIcon{ color: #334155; }
    .appShell .navItemTable .sidebarItemIcon{ color: #334155; }
    .appShell .navItemTasks .sidebarItemIcon{ color: #334155; }
    .appShell .navItemFinance .sidebarItemIcon{ color: #334155; }
    .appShell .navItemInventory .sidebarItemIcon{ color: #334155; }
    .appShell .navItemDrive .sidebarItemIcon{ color: #334155; }
    .appShell .navItemHr .sidebarItemIcon{ color: #334155; }
    .appShell .navItemEmployees .sidebarItemIcon{ color: #334155; }
    .appShell .navItemSettings .sidebarItemIcon{ color: #334155; }

    .appShell .sidebarNav .btn.active .sidebarItemIcon{
      color: #ffffff;
    }

    .appShell .board{
      gap: 14px;
    }

    .appShell .col{
      border-radius: var(--ui-radius-card);
      border: 1px solid var(--ui-border);
      background: var(--ui-card);
      box-shadow: var(--ui-shadow);
      overflow: hidden;
    }

    .appShell .colHead{
      border-bottom: 1px solid #eef2f7;
      background: #ffffff;
      padding: 13px 14px;
    }

    .appShell .colTitle{
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .appShell .dot{
      width: 10px;
      height: 10px;
      box-shadow: none;
      border-radius: 999px;
    }

    .appShell .col[data-status="new"] .dot,
    .appShell .col[data-status="new"] .pill{
      background: #dbeafe;
      color: #1e40af;
      border: 1px solid #93c5fd;
    }

    .appShell .col[data-status="sent"] .dot,
    .appShell .col[data-status="sent"] .pill{
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fcd34d;
    }

    .appShell .col[data-status="delivered"] .dot,
    .appShell .col[data-status="delivered"] .pill{
      background: #d1fae5;
      color: #065f46;
      border: 1px solid #6ee7b7;
    }

    .appShell .col[data-status="returned"] .dot,
    .appShell .col[data-status="returned"] .pill{
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fca5a5;
    }

    .appShell .pill{
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 10px;
      min-width: auto;
      box-shadow: none;
    }

    .appShell .dropzone{
      background: #f8fafc;
      min-height: 240px;
      padding: 12px;
    }

    .appShell .dropzone.dragover{
      background: #eef2ff;
      border: 1px dashed #a5b4fc;
    }

    .appShell .card,
    .appShell .taskCard,
    .appShell .expenseItem,
    .appShell .collectionItem,
    .appShell .inventoryItem,
    .appShell .driveItem,
    .appShell .hrAttendanceItem,
    .appShell .appNotifItem,
    .appShell .taskComposer,
    .appShell .taskListWrap,
    .appShell .expenseFormCard,
    .appShell .expenseListWrap,
    .appShell .collectionFormCard,
    .appShell .collectionListWrap,
    .appShell .inventoryFormCard,
    .appShell .inventoryListWrap,
    .appShell .driveComposerCard,
    .appShell .driveListWrap,
    .appShell .hrActionCard,
    .appShell .hrScheduleCard,
    .appShell .hrReportCard,
    .appShell .appNotificationsBody{
      border-radius: var(--ui-radius-card);
      border: 1px solid var(--ui-border);
      background: var(--ui-card);
      box-shadow: var(--ui-shadow);
      padding: 20px;
    }

    .appShell .card:hover,
    .appShell .taskCard:hover,
    .appShell .expenseItem:hover,
    .appShell .collectionItem:hover,
    .appShell .inventoryItem:hover,
    .appShell .driveItem:hover,
    .appShell .hrAttendanceItem:hover,
    .appShell .appNotifItem:hover{
      box-shadow: var(--ui-shadow-hover);
      transform: translateY(-2px);
    }

    .appShell .meta{
      margin-bottom: 12px;
      align-items: center;
    }

    .appShell .id{
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }

    .appShell .badge{
      border-radius: 999px;
      border: 1px solid #d4dcf0;
      background: #eef2ff;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 10px;
    }

    .appShell .label{
      color: var(--ui-muted);
      font-size: 13px;
      font-weight: 600;
    }

    .appShell .text{
      color: var(--ui-text);
      font-size: 14px;
      line-height: 1.7;
    }

    .appShell .line{
      height: 1px;
      background: #edf1f8;
      margin: 12px 0;
    }

    .appShell .miniRow{
      color: #64748b;
      font-size: 12px;
      margin-top: 12px;
      gap: 12px;
    }

    .appShell .miniRow .emp{
      color: #1f2937;
      font-weight: 700;
    }

    .appShell .dropzone .card{
      padding: 14px;
      border-radius: 14px;
    }

    .appShell .orderRowHead{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .appShell .orderRowIdWrap{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .appShell .orderRowId{
      font-size: 15px;
      font-weight: 800;
      color: #1e293b;
    }

    .appShell .orderRowDate{
      background: #f1f5f9;
      border-color: #d8e1ee;
      color: #64748b;
    }

    .appShell .orderRowStatus{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid transparent;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .appShell .orderRowStatus--new{
      background: #dbeafe;
      color: #1e40af;
      border-color: #93c5fd;
    }

    .appShell .orderRowStatus--sent{
      background: #fef3c7;
      color: #92400e;
      border-color: #fcd34d;
    }

    .appShell .orderRowStatus--delivered{
      background: #d1fae5;
      color: #065f46;
      border-color: #6ee7b7;
    }

    .appShell .orderRowStatus--returned{
      background: #fee2e2;
      color: #991b1b;
      border-color: #fca5a5;
    }

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

    .appShell .orderRowCell{
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      padding: 12px;
    }

    .appShell .orderRowCell .label{
      margin-bottom: 4px;
    }

    .appShell .orderRowSubLabel{
      margin-top: 8px;
    }

    .appShell .orderNoteLabel{
      margin-top: 8px;
      color: #b91c1c;
      font-weight: 700;
    }

    .appShell .orderNoteText{
      color: #b91c1c;
      font-weight: 700;
    }

    .appShell .orderEmpty{
      color: #94a3b8;
    }

    .appShell .orderRowMeta{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .appShell .orderMetaList{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      flex: 1 1 auto;
      min-width: 0;
    }

    .appShell .orderMetaItem{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 10px;
      white-space: nowrap;
    }

    .appShell .orderMetaLabel{
      color: #64748b;
      font-weight: 700;
    }

    .appShell .orderRowActions{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 8px;
    }

    .appShell .orderRowActionBtn{
      min-height: 34px;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.2;
      box-shadow: none;
    }

    .appShell .orderRowSendBtn{
      max-width: 190px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .appShell .dropzone .thumbs{
      margin-top: 8px;
    }

    .appShell .dropzone .thumbs img{
      width: 44px;
      height: 44px;
      border-radius: 10px;
      border: 1px solid #d8dfed;
    }

    .appShell .ordersTableSection{
      border-radius: var(--ui-radius-card);
      border: 1px solid var(--ui-border);
      background: var(--ui-card);
      box-shadow: var(--ui-shadow);
      padding: 16px;
      margin-top: 14px;
    }

    .appShell .ordersTableToolbar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .appShell .ordersStatusTabs{
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .appShell .ordersStatusTab{
      border: 1px solid #d9e1ef;
      border-radius: 999px;
      background: #ffffff;
      color: #334155;
      font-size: 13px;
      font-weight: 700;
      padding: 8px 14px;
      cursor: pointer;
    }

    .appShell .ordersStatusTab:hover{
      border-color: #c7d2fe;
      background: #f8fafc;
    }

    .appShell .ordersStatusTab.active{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-color: rgba(99, 102, 241, 0.42);
      color: #ffffff;
      box-shadow: 0 6px 14px rgba(99, 102, 241, 0.2);
    }

    .appShell .ordersTableHint{
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
    }

    .appShell .ordersTableToolbarActions{
      margin-inline-start: auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .appShell .ordersTableCreateBtn{
      min-height: 40px;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .appShell .ordersTableFilterBtn{
      min-height: 40px;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .appShell .ordersTableWrap{
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #ffffff;
      overflow: auto;
    }

    .appShell .ordersTablePagination{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border-top: 1px solid #eef2f7;
      background: #f8fafc;
      padding: 10px 12px;
    }

    .appShell .ordersTablePaginationMeta{
      color: #475569;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }

    .appShell .ordersTablePaginationBtn{
      min-height: 34px;
      padding: 0 12px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell .ordersTable{
      width: 100%;
      min-width: 980px;
      border-collapse: collapse;
    }

    .appShell .ordersTable thead th{
      text-align: right;
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      padding: 14px 12px;
      white-space: nowrap;
    }

    .appShell .ordersTable tbody td{
      color: #1e293b;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eef2f7;
      padding: 13px 12px;
      vertical-align: middle;
      white-space: nowrap;
    }

    .appShell .ordersTable tbody tr:hover{
      background: #f8fafc;
    }

    .appShell .ordersTable tbody tr.ordersTableRow td{
      border-bottom: 0;
      padding-bottom: 8px;
    }

    .appShell .ordersTable tbody tr.ordersTableMetaRow td{
      border-bottom: 1px solid #eef2f7;
      padding-top: 0;
      padding-bottom: 12px;
      background: #ffffff;
    }

    .appShell .ordersTable tbody tr.ordersTableMetaRow:hover{
      background: transparent;
    }

    .appShell .ordersTableMetaInline{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .appShell .ordersTableMetaChip{
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 10px;
      white-space: nowrap;
    }

    .appShell .ordersTableMetaChip strong{
      color: #334155;
      font-weight: 800;
    }

    .appShell .ordersTableMetaChipCost{
      border-color: #c7d2fe;
      background: #eef2ff;
      color: #4338ca;
    }

    .appShell .ordersTableOrderId{
      font-weight: 800;
      color: #0f172a;
    }

    .appShell .ordersTableOrderCell{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      direction: rtl;
    }

    .appShell .ordersTableOrderInvoiceBtn{
      min-width: 30px;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      padding: 0;
    }

    .appShell .ordersTableStatus{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 10px;
    }

    .appShell .ordersTableStatus--new{
      background: #dbeafe;
      color: #1e40af;
      border-color: #93c5fd;
    }

    .appShell .ordersTableStatus--sent{
      background: #fef3c7;
      color: #92400e;
      border-color: #fcd34d;
    }

    .appShell .ordersTableStatus--delivered{
      background: #d1fae5;
      color: #065f46;
      border-color: #6ee7b7;
    }

    .appShell .ordersTableStatus--returned{
      background: #fee2e2;
      color: #991b1b;
      border-color: #fca5a5;
    }

    .appShell .ordersStatusMenu{
      position: relative;
      display: inline-block;
    }

    .appShell .ordersStatusMenuToggle{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .appShell .ordersStatusMenu.isBusy .ordersStatusMenuToggle{
      cursor: wait;
      opacity: 0.72;
      pointer-events: none;
    }

    .appShell .ordersStatusMenuToggle::-webkit-details-marker{
      display: none;
    }

    .appShell .ordersStatusMenuCaret{
      color: #94a3b8;
      font-size: 12px;
      line-height: 1;
    }

    .appShell .ordersStatusMenu[open] .ordersStatusMenuCaret{
      transform: rotate(180deg);
    }

    .appShell .ordersStatusMenuList{
      position: absolute;
      top: calc(100% + 8px);
      inset-inline-end: 0;
      min-width: 140px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
      box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      z-index: 20;
    }

    .appShell .ordersStatusMenu.open-up .ordersStatusMenuList{
      top: auto;
      bottom: calc(100% + 8px);
    }

    .appShell .ordersStatusMenuItem{
      width: 100%;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: #334155;
      font-size: 13px;
      font-weight: 700;
      text-align: right;
      padding: 7px 9px;
      cursor: pointer;
    }

    .appShell .ordersStatusMenuItem:hover{
      background: #f8fafc;
      border-color: #e2e8f0;
    }

    .appShell .ordersStatusMenuItem.active{
      background: #eef2ff;
      border-color: #c7d2fe;
      color: #4338ca;
    }

    .appShell .ordersStatusMenuItem:disabled{
      opacity: 0.6;
      cursor: wait;
    }

    .appShell .ordersTableRow.isStatusUpdating{
      opacity: 0.82;
    }

    .appShell .ordersTableActions{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      direction: rtl;
    }

    .appShell .ordersTableActionView{
      order: 0;
    }

    .appShell .ordersTableActionEdit{
      order: 1;
    }

    .appShell .ordersTableActionDelete{
      order: 2;
    }

    .appShell .ordersTableActionBtn{
      min-width: 32px;
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid #dbe3f2;
      background: #ffffff;
      color: #64748b;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
    }

    .appShell .ordersTableActionBtn:hover{
      background: #f8fafc;
      border-color: #cfd8ea;
      transform: none;
    }

    .appShell .ordersTableActionDelete{
      color: #ef4444;
      border-color: #fecaca;
      background: #fff5f5;
    }

    .appShell .ordersTableActionDelete:hover{
      background: #fee2e2;
      border-color: #fca5a5;
    }

    .appShell .orderTableActionIcon{
      width: 16px;
      height: 16px;
      display: block;
    }

    .appShell .orderTableActionIcon path,
    .appShell .orderTableActionIcon circle{
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .appShell .ordersTableSendBtn{
      order: 3;
      min-height: 32px;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
      box-shadow: none;
      max-width: 170px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .appShell .ordersTableEmpty{
      color: #64748b;
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      padding: 26px 16px;
    }

    /* Orders Filter Toolbar */
    .appShell .ordersFilterToolbar{
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .appShell .ordersFilterControls{
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
      width: max-content;
      min-width: 100%;
    }

    .appShell .ordersFilterInput,
    .appShell .ordersFilterSelect{
      border: 1px solid #d9e1ef;
      border-radius: 5px;
      background: #ffffff;
      color: #1e293b;
      font-size: 11px;
      padding: 4px 7px;
      outline: none;
      transition: all 0.2s ease;
      font-family: var(--font-figma);
      min-height: 28px;
      height: 28px;
    }

    .appShell .ordersFilterInput:focus,
    .appShell .ordersFilterSelect:focus{
      border-color: #6366f1;
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.08);
      background: #ffffff;
    }

    .appShell .ordersTableSearchInput{
      flex: 1;
      min-width: 200px;
    }

    .appShell .ordersFilterDateInput{
      flex: 0 0 132px;
      width: 132px;
      min-width: 132px;
      max-width: 132px;
      padding-inline: 6px;
    }

    .appShell .ordersFilterDateInput:focus{
      box-shadow: none;
    }

    .appShell .ordersFilterClearBtn{
      border: 1px solid #d9e1ef;
      background: #ffffff;
      color: #64748b;
      font-size: 11px;
      padding: 4px 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      min-height: 28px;
      height: 28px;
      border-radius: 5px;
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .appShell .ordersFilterClearBtn:hover{
      background: #fee2e2;
      border-color: #fca5a5;
      color: #991b1b;
    }

    .appShell .ordersFilterStats{
      display: flex;
      align-items: center;
      gap: 6px;
      margin-inline-start: auto;
      background: white;
      border: 1px solid #c7d2fe;
      border-radius: 6px;
      padding: 4px 10px;
      flex: 0 0 auto;
    }

    .appShell .ordersFilterStatsLabel{
      font-size: 11px;
      font-weight: 600;
      color: #4338ca;
    }

    .appShell .ordersFilterStatsValue{
      font-size: 12px;
      font-weight: 800;
      color: #4338ca;
    }

    .appShell .ordersFilterStatsDivider{
      font-size: 11px;
      font-weight: 800;
      color: #94a3b8;
      opacity: 0.9;
    }

    @media (max-width: 768px){
      .appShell .ordersFilterControls{
        gap: 5px;
      }

      .appShell .ordersFilterInput,
      .appShell .ordersFilterSelect{
        font-size: 10px;
        padding: 3px 6px;
        min-height: 26px;
        height: 26px;
      }

      .appShell .ordersTableSearchInput{
        min-width: 140px;
      }

      .appShell .ordersFilterDateInput{
        flex: 0 0 116px;
        width: 116px;
        min-width: 116px;
        max-width: 116px;
      }

      .appShell .ordersFilterClearBtn{
        font-size: 10px;
        padding: 3px 6px;
        min-height: 26px;
        height: 26px;
      }

      .appShell .ordersFilterStats{
        padding: 3px 8px;
        gap: 4px;
        margin-inline-start: 0;
      }

      .appShell .ordersFilterStatsLabel{
        font-size: 10px;
      }

      .appShell .ordersFilterStatsValue{
        font-size: 11px;
      }
    }

    .appShell #ordersFilterBackdrop{
      backdrop-filter: blur(8px);
    }

    .appShell .ordersFilterModal{
      max-height: calc(100dvh - 36px);
      display: flex;
      flex-direction: column;
    }

    .appShell .ordersFilterModalBody{
      overflow: auto;
      padding: 14px;
    }

    .appShell .ordersFilterModalField{
      border-radius: 14px;
      border: 1px solid #dbe5f4;
      background: #f8fafc;
      padding: 12px;
    }

    .appShell .ordersFilterModalGrid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .appShell .ordersFilterModalCol{
      min-width: 0;
    }

    .appShell .ordersFilterModalCol .label{
      margin-bottom: 6px;
      display: block;
    }

    .appShell .ordersFilterStatusWrap{
      margin-top: 12px;
    }

    .appShell .ordersFilterStatusRow{
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .appShell .ordersFilterStatusOption{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #d9e1ef;
      border-radius: 999px;
      background: #ffffff;
      color: #334155;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 10px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .appShell .ordersFilterStatusOption:hover{
      border-color: #c7d2fe;
      background: #eef2ff;
    }

    .appShell .ordersFilterStatusOption input{
      width: 14px;
      height: 14px;
      margin: 0;
      accent-color: #6366f1;
      cursor: pointer;
    }

    .appShell .ordersFilterDateRow{
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .appShell .ordersFilterDateRow .label{
      margin-bottom: 6px;
      display: block;
    }

    @media (max-width: 900px){
      .appShell .ordersFilterModalGrid{
        grid-template-columns: 1fr;
      }

      .appShell .ordersFilterDateRow{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px){
      .appShell .ordersTableFilterBtn,
      .appShell .ordersTableCreateBtn{
        min-height: 38px;
        padding: 8px 11px;
        font-size: 13px;
      }

      .appShell .ordersFilterStatusOption{
        font-size: 11px;
        padding: 6px 9px;
      }

      .appShell .ordersFilterModalBody{
        padding: 10px;
      }

      .appShell .ordersFilterModalField{
        padding: 10px;
      }
    }




    .appShell #modalBackdrop .modal{
      width: min(980px, 100%);
      max-height: calc(100dvh - 40px);
      display: flex;
      flex-direction: column;
    }

    .appShell #modalBackdrop .modalHead{
      padding: 14px 16px 12px;
      border-bottom: 1px solid #e8edf6;
      background: #ffffff;
    }

    .appShell #modalBackdrop .modalHead h2{
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
    }

    .appShell #modalBackdrop .modalBody{
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 14px;
      padding: 16px;
      overflow: auto;
      max-height: calc(100dvh - 212px);
    }

    .appShell #modalBackdrop .modalTicketField{
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
      padding: 14px;
      min-width: 0;
    }

    .appShell #modalBackdrop .modalTicketFieldCustomer,
    .appShell #modalBackdrop .modalTicketFieldOrder{
      grid-column: span 6;
    }

    .appShell #modalBackdrop .modalTicketFieldMain{
      grid-column: 1 / -1;
    }

    .appShell #modalBackdrop .fieldTitle{
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid #eef2f7;
      align-items: flex-end;
    }

    .appShell #modalBackdrop .fieldTitle strong{
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    .appShell #modalBackdrop .fieldTitle .hint{
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
    }

    .appShell #modalBackdrop .label{
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .appShell #modalBackdrop .row{
      margin-top: 10px;
      gap: 12px;
    }

    .appShell #modalBackdrop .uploads{
      margin-top: 10px;
    }

    .appShell #modalBackdrop .modalFoot{
      padding: 12px 16px 14px;
      background: #ffffff;
      border-top: 1px solid #e8edf6;
    }

    .appShell .tasksSection,
    .appShell .expensesSection,
    .appShell .collectionsSection,
    .appShell .inventorySection,
    .appShell .driveSection,
    .appShell .hrSection,
    .appShell .financeTabs{
      border-radius: var(--ui-radius-card);
      border: 1px solid var(--ui-border);
      background: var(--ui-card);
      box-shadow: var(--ui-shadow);
      padding: 20px;
      margin-top: 14px;
    }

    .appShell .tasksSection::before,
    .appShell .expensesSection::before,
    .appShell .collectionsSection::before,
    .appShell .inventorySection::before,
    .appShell .driveSection::before,
    .appShell .hrSection::before{
      display: none;
    }

    .appShell .tasksHead{
      border-bottom: 1px solid #edf2fa;
      margin-bottom: 14px;
      padding-bottom: 12px;
      gap: 10px;
    }

    .appShell .tasksTitleWrap h2{
      font-size: 24px;
      font-weight: 600;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
    }

    .appShell #tasksSectionHead .tasksTitleWrap h2::before{ content: "✅"; font-size: 18px; }
    .appShell #expensesSectionHead .tasksTitleWrap h2::before{ content: "💸"; font-size: 18px; }
    .appShell #collectionsSectionHead .tasksTitleWrap h2::before{ content: "💰"; font-size: 18px; }
    .appShell #inventorySectionHead .tasksTitleWrap h2::before{ content: "📦"; font-size: 18px; }
    .appShell #driveSectionHead .tasksTitleWrap h2::before{ content: "🗂"; font-size: 18px; }
    .appShell #hrSectionHead .tasksTitleWrap h2::before{ content: "🕒"; font-size: 18px; }

    .appShell .tasksTitleWrap p{
      font-size: 14px;
      color: var(--ui-muted);
      font-weight: 500;
      margin-top: 5px;
    }

    .appShell .financeTabs{
      display: inline-flex;
      gap: 8px;
      padding: 8px;
    }

    .appShell .financeTabBtn{
      border-radius: 8px;
      border: 1px solid #d8dfed;
      background: #ffffff;
      color: #475569;
      padding: 10px 18px;
      font-weight: 700;
    }

    .appShell .financeTabBtn.active{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-color: rgba(99, 102, 241, 0.42);
      color: #ffffff;
      box-shadow: 0 8px 18px rgba(99, 102, 241, 0.25);
    }

    .appShell .modalBackdrop{
      background: rgba(15, 23, 42, 0.42);
      backdrop-filter: blur(8px);
    }

    .appShell .modal{
      border-radius: var(--ui-radius-card);
      border: 1px solid var(--ui-border);
      box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
    }

    .appShell .appNotificationsSection{
      border-radius: var(--ui-radius-card);
      border: 1px solid var(--ui-border);
      box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
      background: #ffffff;
    }

    .appShell .appSignature{
      color: #94a3b8;
      font-size: 12px;
      margin-top: 6px;
    }

    @media (max-width: 1180px){
      .appShell .brandTitle{
        font-size: 34px;
      }

      .appShell .brandTitle::after{
        font-size: 16px;
      }

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

      .appShell.sidebar-open .appLayout{
        grid-template-columns: 272px minmax(0, 1fr);
      }

      .appShell .sidebarNav .btn,
      .appShell .sidebarNavTools .btn{
        font-size: 15px;
      }

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

    @media (max-width: 960px){
      .appShell .appLayout{
        display: block;
        max-width: none;
        padding: 0;
        transition: none;
      }

      .appShell .container{
        padding: 10px;
      }

      .appShell .sidebarBackdrop{
        position: fixed;
        inset: 0;
        height: auto;
        pointer-events: none;
        z-index: 80;
        overflow: visible;
      }

      .appShell .sidebarBackdrop.open{
        pointer-events: auto;
      }

      .appShell .sidebarShade{
        display: block;
      }

      .appShell .sidebarPanel{
        position: absolute;
        top: 0;
        right: 0;
        width: min(340px, 92vw);
        height: 100%;
        max-height: none;
        transform: translateX(105%);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        border-radius: 0;
        border-left: 1px solid var(--ui-border);
        border-right: 0;
        box-shadow: -16px 0 32px rgba(15, 23, 42, 0.22);
      }

      .appShell .sidebarBackdrop.open .sidebarPanel{
        transform: translateX(0);
      }

      .appShell .sidebarSub,
      .appShell #closeSidebarBtn{
        display: inline-flex;
      }

      .appShell .sidebarSub{
        display: block;
        margin: 0 8px;
        color: #64748b;
        font-size: 12px;
      }

      .appShell .topbar{
        padding: 12px 10px;
      }

      .appShell .brandTitle{
        font-size: 30px;
      }

      .appShell .brandTitle::after{
        font-size: 14px;
      }

      .appShell .monthlyTicker{
        padding: 0 10px 10px;
      }

      .appShell .monthlyTickerViewport{
        min-height: 82px;
      }

      .appShell .searchWrap{
        width: 100%;
      }

      .appShell .orderRowGrid{
        grid-template-columns: 1fr;
      }

      .appShell .orderRowHead{
        flex-wrap: wrap;
      }

      .appShell .orderRowStatus{
        margin-inline-start: auto;
      }

      .appShell .orderMetaItem{
        white-space: normal;
      }

      .appShell .ordersTableSection{
        padding: 12px;
      }

      .appShell .ordersTableToolbar{
        align-items: flex-start;
      }

      .appShell .ordersTableHint{
        font-size: 12px;
      }

      .appShell .ordersStatusTabs{
        width: 100%;
      }

      .appShell .ordersTableToolbarActions{
        width: 100%;
        justify-content: space-between;
      }

      .appShell .ordersTable{
        min-width: 760px;
      }

      .appShell .ordersTableMetaChip{
        white-space: normal;
      }

      .appShell #modalBackdrop .modalBody{
        grid-template-columns: 1fr;
        max-height: calc(100dvh - 188px);
      }

      .appShell #modalBackdrop .modalTicketFieldCustomer,
      .appShell #modalBackdrop .modalTicketFieldOrder,
      .appShell #modalBackdrop .modalTicketFieldMain{
        grid-column: auto;
      }
    }

    @media (max-width: 620px){
      .appShell .brandTitle{
        font-size: 24px;
      }

      .appShell .brandTitle::after{
        font-size: 12px;
      }

      .appShell .actions{
        gap: 6px;
      }

      .appShell .searchWrap{
        flex-wrap: wrap;
        padding: 6px;
      }

      .appShell .search,
      .appShell .sourceFilter,
      .appShell #dateFromFilter,
      .appShell #dateToFilter,
      .appShell #companyFilter{
        width: 100%;
      }

      .appShell .tasksSection,
      .appShell .expensesSection,
      .appShell .collectionsSection,
      .appShell .inventorySection,
      .appShell .driveSection,
      .appShell .hrSection,
      .appShell .financeTabs{
        padding: 14px;
      }

      .appShell .tasksTitleWrap h2{
        font-size: 20px;
      }

      .appShell .ordersTable{
        min-width: 680px;
      }
    }

    /* Header positioning tweak - Figma alignment */
    .appShell .topbar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      gap: 10px;
    }

    .appShell .topMenuBtn{
      flex: 0 0 auto;
      min-width: 44px;
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 10px;
      order: 1;
    }

    .appShell .brandMain{
      order: 2;
      flex: 0 0 auto;
    }

    .appShell .headerActions{
      order: 3;
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
    }

    .appShell .headerActions .searchWrap{
      order: 1;
      flex: 0 1 390px;
      max-width: 390px;
      margin-inline-end: auto;
    }

    .appShell .headerActions .actionsQuick{
      order: 2;
      flex: 0 0 auto;
      margin: 0;
      gap: 6px;
    }

    .appShell #currentUser{
      order: 3;
      flex: 0 0 auto;
      margin-inline: 0 !important;
    }

    .appShell .actions > .btn.ghost[onclick="signOut()"]{
      order: 4;
    }

    .appShell #createUserQuickBtn,
    .appShell #adminUsersBtn,
    .appShell #createCompanyQuickBtn,
    .appShell #newTicketBtn{
      order: 6;
    }

    .appShell .headerNotifWrap{
      position: relative;
      order: 1;
    }

    @media (max-width: 960px){
      .appShell .topbar{
        flex-wrap: wrap;
        justify-content: flex-start;
      }

      .appShell .topMenuBtn{
        order: 1;
      }

      .appShell .brandMain{
        order: 2;
      }

      .appShell .headerActions{
        order: 3;
        width: 100%;
        flex-wrap: wrap;
      }

      .appShell .headerActions .searchWrap{
        order: 1;
        flex: 1 1 100%;
        max-width: none;
        margin-inline-end: 0;
      }

      .appShell .headerActions .actionsQuick{
        order: 2;
      }

      .appShell #currentUser{
        order: 3;
      }
    }

    /* Dashboard view */
    .appShell .dashboardSection{
      border-radius: var(--ui-radius-card);
      border: 1px solid var(--ui-border);
      background: var(--ui-card);
      box-shadow: var(--ui-shadow);
      padding: 20px;
      margin-bottom: 14px;
      display: none;
    }

    .appShell .dashboardHead{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid #edf2fa;
    }

    .appShell .dashboardTitleWrap h2{
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .appShell .dashboardTitleWrap h2::before{
      content: "📊";
      font-size: 18px;
    }

    .appShell .dashboardTitleWrap p{
      margin: 6px 0 0;
      color: var(--ui-muted);
      font-size: 14px;
      font-weight: 500;
    }

    .appShell .dashboardRangeHint{
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      background: #f8fafc;
      border: 1px solid var(--ui-border);
      border-radius: 999px;
      padding: 6px 10px;
      white-space: nowrap;
    }

    .appShell .dashboardStatsGrid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-bottom: 16px;
    }

    .appShell .dashboardStatCard{
      border-radius: 18px;
      border: 1px solid #dce3ed;
      background: #ffffff;
      box-shadow: var(--ui-shadow);
      padding: 18px 20px;
      min-height: 176px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 8px;
    }

    .appShell .dashboardStatCard:hover{
      box-shadow: var(--ui-shadow-hover);
      transform: translateY(-2px);
    }

    .appShell .dashboardQuickLink{
      cursor: pointer;
    }

    .appShell .dashboardQuickLink:focus-visible{
      outline: 3px solid rgba(79, 70, 229, 0.28);
      outline-offset: 2px;
    }

    .appShell .dashboardSaleItem.dashboardQuickLink:hover{
      border-color: #c7d2fe;
      box-shadow: 0 10px 24px rgba(99, 102, 241, 0.14);
      transform: translateY(-1px);
    }

    .appShell .dashboardStatTop{
      display: flex;
      align-items: center;
      justify-content: space-between;
      direction: ltr;
      gap: 10px;
      margin-bottom: 6px;
    }

    .appShell .dashboardStatTrend{
      border-radius: 999px;
      border: 1px solid #d9f2df;
      background: #ecf9f0;
      color: #3da75a;
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
      padding: 8px 14px;
      white-space: nowrap;
    }

    .appShell .dashboardStatIcon{
      width: 60px;
      min-width: 60px;
      height: 60px;
      border-radius: 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 34px;
      font-weight: 700;
      line-height: 1;
      box-shadow: 0 8px 16px rgba(30, 41, 59, 0.18);
    }

    .appShell .dashboardStatCardOrders .dashboardStatIcon{
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      font-size: 30px;
    }

    .appShell .dashboardStatCardNew .dashboardStatIcon{
      background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
      font-size: 28px;
    }

    .appShell .dashboardStatCardProducts .dashboardStatIcon{
      background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
      font-size: 30px;
    }

    .appShell .dashboardStatLabel{
      color: var(--ui-muted);
      font-size: 14px;
      font-weight: 600;
      margin: 6px 0 2px;
    }

    .appShell .dashboardStatValue{
      color: #0f172a;
      font-size: 38px;
      font-weight: 700;
      line-height: 1.1;
    }

    .appShell .dashboardStatSubValue{
      margin-top: 6px;
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
    }

    .appShell .dashboardEmployeesTopTag{
      border-color: #86efac;
      background: #dcfce7;
      color: #166534;
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
    }

    .appShell .dashboardEmployeesTicker{
      margin-top: 10px;
      min-height: 88px;
      max-height: 132px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      padding: 8px;
      overflow: auto;
      position: relative;
    }

    .appShell .dashboardEmployeesList{
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .appShell .dashboardEmployeesItem{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      padding: 8px 10px;
    }

    .appShell .dashboardEmployeesItem.isTop{
      border-color: #86efac;
      background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    }

    .appShell .dashboardEmployeesNameWrap{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .appShell .dashboardEmployeesName{
      color: #1e293b;
      font-size: 14px;
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 130px;
    }

    .appShell .dashboardEmployeesTopChip{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 1px solid #86efac;
      background: #dcfce7;
      font-size: 12px;
      line-height: 1;
    }

    .appShell .dashboardEmployeesCount{
      color: #334155;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .appShell .dashboardEmployeesTickerEmpty{
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      padding: 4px;
    }

    .appShell .dashboardMetricsGrid{
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
      margin-bottom: 12px;
    }

    .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split #dashboardSalesPanel{
      grid-column: 1 / -1;
    }

    .appShell .dashboardPanel{
      border-radius: 18px;
      border: 1px solid #dce3ed;
      background: #ffffff;
      box-shadow: var(--ui-shadow);
      padding: 18px;
    }

    .appShell .dashboardPanelFull{
      margin-top: 2px;
      padding: 22px 24px;
    }

    .appShell .dashboardPanelHead{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
    }

    .appShell .dashboardPanelHead h3{
      margin: 0;
      color: #0f172a;
      font-size: 20px;
      font-weight: 700;
    }

    .appShell .dashboardPanelNote{
      color: #94a3b8;
      font-size: 14px;
      font-weight: 700;
    }

    .appShell .dashboardTargetWrap{
      margin-bottom: 14px;
      border-radius: 14px;
      border: 1px solid #dbe7df;
      background: linear-gradient(180deg, #f7fcf8 0%, #eff9f1 100%);
      padding: 12px 14px;
    }

    .appShell .dashboardTargetHead{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .appShell .dashboardTargetText{
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .appShell .dashboardTargetText strong{
      color: #14532d;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.2;
    }

    .appShell .dashboardTargetText span{
      color: #4b5563;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.5;
    }

    .appShell .dashboardTargetBtn{
      white-space: nowrap;
      align-self: center;
    }

    .appShell .dashboardTargetBar{
      position: relative;
      overflow: hidden;
      height: 14px;
      border-radius: 999px;
      background: #deebe1;
      border: 1px solid #c6dccb;
    }

    .appShell .dashboardTargetBarFill{
      display: block;
      height: 100%;
      width: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
      transition: width 220ms ease;
    }

    .appShell .dashboardTargetBarFill.isComplete{
      background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
      box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.18);
    }

    .appShell .dashboardTargetFoot{
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .appShell .dashboardTargetFoot span{
      color: #166534;
      font-size: 12px;
      font-weight: 800;
    }

    .appShell .dashboardPanelFull .dashboardPanelNote{
      color: #6366f1;
      font-size: 14px;
      font-weight: 800;
    }

    .appShell .dashboardSalesGrid{
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    .appShell .dashboardSaleItem{
      border-radius: 10px;
      border: 1px solid var(--ui-border);
      background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .appShell .dashboardSaleItem span{
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
    }

    .appShell .dashboardSaleItem strong{
      color: #4338ca;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.1;
    }

    .appShell .dashboardList{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .appShell .dashboardLowStockList{
      max-height: 356px;
      overflow: auto;
      padding-inline-end: 2px;
    }

    .appShell .dashboardListItem{
      border-radius: 12px;
      border: 1px solid #e5ebf4;
      background: #f5f7fc;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .appShell .dashboardListItem:hover{
      background: #edf2fb;
      border-color: #dbe4ff;
    }

    .appShell .dashboardListMain{
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .appShell .dashboardListIndex{
      color: #6366f1;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell .dashboardListTitle{
      color: #0f172a;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.25;
      word-break: break-word;
    }

    .appShell .dashboardListMeta{
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      word-break: break-word;
    }

    .appShell .dashboardListValue{
      color: #334155;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .appShell .dashboardLowStockItem{
      border-color: #f6d9b8;
      background: linear-gradient(180deg, #fff9f3 0%, #fff4e8 100%);
    }

    .appShell .dashboardLowStockValue{
      min-width: 48px;
      text-align: center;
      border-radius: 999px;
      border: 1px solid #fdba74;
      background: #fff7ed;
      color: #9a3412;
      padding: 6px 10px;
    }

    .appShell .dashboardLowStockValue.isCritical{
      border-color: #fca5a5;
      background: #fef2f2;
      color: #b91c1c;
    }

    .appShell .dashboardPanelFull .dashboardListValue{
      font-size: 16px;
      line-height: 1;
      color: #1f2937;
    }

    .appShell .dashboardOrderItem{
      align-items: center;
    }

    .appShell .dashboardOrderSide{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 3px;
      min-width: 172px;
    }

    .appShell .dashboardPanelFull .dashboardList{
      gap: 12px;
    }

    .appShell .dashboardPanelFull .dashboardListItem{
      border-radius: 18px;
      border: 1px solid #dfe6f1;
      background: #edf2fa;
      padding: 14px 18px;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    }

    .appShell .dashboardPanelFull .dashboardListMain{
      gap: 5px;
    }

    .appShell .dashboardPanelFull .dashboardListTitle{
      font-size: 18px;
      font-weight: 700;
      color: #1f2937;
    }

    .appShell .dashboardPanelFull .dashboardListMeta{
      font-size: 12px;
      color: #64748b;
    }

    .appShell .dashboardPanelFull .dashboardOrderSide{
      position: relative;
      padding-inline-end: 52px;
      min-width: 214px;
      gap: 4px;
    }

    .appShell .dashboardPanelFull .dashboardOrderSide::after{
      content: "◈";
      position: absolute;
      inset-inline-end: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      border-radius: 14px;
      border: 1px solid #d7dff5;
      background: #e3e9fb;
      color: #6366f1;
      font-size: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .appShell .dashboardOrderDate{
      color: #94a3b8;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }

    .appShell .dashboardPanelFull .dashboardOrderDate{
      font-size: 12px;
      color: #7b8797;
    }

    .appShell .dashboardStatus{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .appShell .dashboardPanelFull .dashboardStatus{
      font-size: 14px;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: 999px;
    }

    .appShell .dashboardStatusNew{
      background: #dbeafe;
      color: #1e40af;
      border-color: #93c5fd;
    }

    .appShell .dashboardStatusSent{
      background: #fef3c7;
      color: #92400e;
      border-color: #fcd34d;
    }

    .appShell .dashboardStatusDelivered{
      background: #d1fae5;
      color: #065f46;
      border-color: #6ee7b7;
    }

    .appShell .dashboardStatusReturned{
      background: #fee2e2;
      color: #991b1b;
      border-color: #fca5a5;
    }

    .appShell .dashboardEmpty{
      border-radius: 10px;
      border: 1px dashed #dbe4f2;
      background: #f8fafc;
      padding: 12px;
      color: #94a3b8;
      font-size: 13px;
      font-weight: 600;
      text-align: center;
    }

    @media (max-width: 1180px){
      .appShell .dashboardStatsGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .appShell .dashboardMetricsGrid{
        grid-template-columns: 1fr;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      }

      .appShell .dashboardStatValue{
        font-size: 32px;
      }

      .appShell .dashboardStatIcon{
        width: 54px;
        min-width: 54px;
        height: 54px;
        border-radius: 15px;
        font-size: 30px;
      }
    }

    @media (max-width: 760px){
      .appShell .dashboardSection{
        padding: 14px;
      }

      .appShell .dashboardHead{
        flex-wrap: wrap;
      }

      .appShell .dashboardTargetHead{
        flex-direction: column;
        align-items: stretch;
      }

      .appShell .dashboardTargetBtn{
        width: 100%;
      }

      .appShell .dashboardSalesGrid{
        grid-template-columns: 1fr;
      }

      .appShell .dashboardStatsGrid{
        grid-template-columns: 1fr;
      }

      .appShell .dashboardStatCard{
        min-height: 154px;
        padding: 14px;
      }

      .appShell .dashboardStatTrend{
        font-size: 13px;
        padding: 7px 12px;
      }

      .appShell .dashboardStatIcon{
        width: 48px;
        min-width: 48px;
        height: 48px;
        border-radius: 13px;
        font-size: 26px;
      }

      .appShell .dashboardStatValue{
        font-size: 30px;
      }

      .appShell .dashboardPanelFull{
        padding: 14px;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split{
        gap: 8px;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split .dashboardPanel{
        padding: 12px;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split .dashboardPanelHead{
        margin-bottom: 10px;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split .dashboardPanelHead h3{
        font-size: 15px;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split .dashboardPanelNote{
        font-size: 11px;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split .dashboardList{
        gap: 8px;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split .dashboardListItem{
        padding: 10px;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split .dashboardListTitle{
        font-size: 12px;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split .dashboardListMeta{
        font-size: 11px;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split .dashboardListValue{
        font-size: 12px;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split .dashboardOrderItem{
        flex-direction: column;
        align-items: flex-start;
      }

      .appShell .dashboardMetricsGrid.dashboardMetricsGrid--split .dashboardOrderSide{
        width: 100%;
        min-width: 0;
        align-items: flex-start;
      }

      .appShell .dashboardPanelFull .dashboardListItem{
        padding: 12px;
        border-radius: 14px;
      }

      .appShell .dashboardOrderItem{
        flex-direction: column;
      }

      .appShell .dashboardOrderSide{
        width: 100%;
        align-items: flex-start;
      }

      .appShell .dashboardPanelFull .dashboardOrderSide{
        min-width: 0;
        width: 100%;
        padding-inline-end: 46px;
      }
    }

    /* Header final - company dashboard identity */
    .appShell .monthlyTicker{
      display: flex;
    }

    .appShell header{
      display: block;
      background: #ffffff;
      border-bottom: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }

    .appShell .topbar{
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 14px 22px;
      min-height: 88px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: nowrap;
      justify-content: flex-start;
    }

    .appShell .topMenuBtn{
      order: 1;
      flex: 0 0 auto;
      width: 44px;
      min-width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      box-shadow: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #475569;
      font-size: 0;
      line-height: 0;
    }

    .appShell .topMenuBtn:hover{
      background: #f8fafc;
      border-color: #e2e8f0;
      box-shadow: none;
      transform: none;
    }

    .appShell .btn.topMenuBtn::before{
      content: none;
    }

    .appShell .topMenuBtn .menuBtnLabel{
      display: none;
    }

    .appShell .headerIconWrap{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
    }

    .appShell .headerIconSvg{
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .appShell .brandMain{
      order: 2;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-inline-start: 0;
    }

    .appShell .brandMain .logo{
      order: 1;
      flex: 0 0 auto;
    }

    .appShell .brandMain .brandText{
      order: 2;
    }

    .appShell .brandText{
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 4px;
    }

    .appShell .brandTitle{
      margin: 0;
      color: #0f172a;
      font-size: 42px;
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -0.012em;
    }

    .appShell .brandTitle::after{
      display: none;
    }

    .appShell .brandCompanyTitle{
      margin: 0;
      color: #94a3b8;
      font-size: 20px;
      font-weight: 600;
      line-height: 1.1;
    }

    .appShell .logo{
      width: 56px;
      height: 56px;
      border-radius: 18px;
      border: 1px solid #d8def1;
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      box-shadow: 0 8px 18px rgba(99, 102, 241, 0.25);
      overflow: hidden;
    }

    .appShell .headerActions{
      order: 3;
      flex: 1 1 auto;
      min-width: 0;
      margin-inline-start: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      flex-wrap: nowrap;
    }

    .appShell .headerActions .searchWrap{
      order: 1;
      flex: 0 0 auto;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      display: flex;
      align-items: center;
      gap: 0;
    }

    .appShell .headerActions #search,
    .appShell .headerActions #sourceFilter,
    .appShell .headerActions #dateFromFilter,
    .appShell .headerActions #dateToFilter{
      display: none !important;
    }

    .appShell .headerActions #companyFilter{
      min-width: 256px;
      height: 50px;
      border-radius: 999px;
      border: 1px solid #dce2ee;
      background: #f8fafc;
      color: #0f172a;
      font-size: 15px;
      font-weight: 700;
      padding-inline: 18px 40px;
    }

    .appShell .headerActions #companyFilter:focus{
      border-color: #c7d2fe;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
    }

    .appShell .headerActions .actionsQuick{
      order: 2;
      flex: 0 0 auto;
      gap: 8px;
      margin: 0;
    }

    .appShell .notifBellBtn{
      width: 44px;
      min-width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 12px;
      border: 1px solid transparent;
      background: transparent;
      box-shadow: none;
      color: #475569;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .appShell .notifBellIcon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
    }

    .appShell .notifBellBtn::before{
      content: none;
    }

    .appShell .notifBellBtn:hover{
      background: #f8fafc;
      border-color: #e2e8f0;
      box-shadow: none;
      transform: none;
    }

    .appShell .orderBellToggleBtn .orderBellStateDot{
      border-color: #ffffff;
    }

    .appShell .orderBellToggleBtn.isOff{
      color: #94a3b8;
      border-color: #e2e8f0;
      background: #f8fafc;
    }

    .appShell .appNotifUnreadBadge--bell{
      background: #ef4444;
      color: #ffffff;
      border: 2px solid #ffffff;
      min-width: 20px;
      height: 20px;
      font-size: 11px;
      font-weight: 800;
      line-height: 18px;
      border-radius: 999px;
      top: -4px;
      right: -3px;
      box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
    }

    .appShell #currentUser{
      order: 3;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid #dbe3f1;
      background: #eef2f7;
      color: #1f2937 !important;
      border-radius: 20px;
      min-height: 56px;
      padding: 8px 10px 8px 14px;
      margin-inline: 0 !important;
      box-shadow: none;
    }

    .appShell #currentUser .userChipText{
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      line-height: 1.05;
    }

    .appShell #currentUser .userChipText strong{
      color: #1f2937;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.1;
    }

    .appShell #currentUser .userChipText small{
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.1;
    }

    .appShell #currentUser .userChipAvatar{
      width: 38px;
      min-width: 38px;
      height: 38px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      background: linear-gradient(135deg, var(--avatar-c1, #6366f1) 0%, var(--avatar-c2, #8b5cf6) 100%);
      box-shadow: 0 6px 14px rgba(99, 102, 241, 0.3);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }

    .appShell .actions > .btn.ghost[onclick="signOut()"]{
      order: 4;
      width: 42px;
      min-width: 42px;
      height: 42px;
      padding: 0;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      color: #64748b;
      font-size: 0;
      box-shadow: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .appShell .actions > .btn.ghost[onclick="signOut()"]:hover{
      background: #f8fafc;
      border-color: #e2e8f0;
      box-shadow: none;
      transform: none;
    }

    .appShell .actions > .btn.ghost[onclick="signOut()"]::before{
      content: none;
    }

    .appShell #newTicketBtn,
    .appShell #createUserQuickBtn,
    .appShell #adminUsersBtn,
    .appShell #createCompanyQuickBtn{
      display: none !important;
    }

    @media (max-width: 1200px){
      .appShell .brandTitle{
        font-size: 36px;
      }

      .appShell .brandCompanyTitle{
        font-size: 17px;
      }

      .appShell .logo{
        width: 50px;
        height: 50px;
        border-radius: 16px;
      }

      .appShell .headerActions #companyFilter{
        min-width: 214px;
      }
    }

    @media (max-width: 960px){
      .appShell .topbar{
        min-height: auto;
        padding: 10px;
        flex-wrap: wrap;
        gap: 8px;
      }

      .appShell .brandMain{
        order: 2;
      }

      .appShell .brandTitle{
        font-size: 30px;
      }

      .appShell .brandCompanyTitle{
        font-size: 14px;
      }

      .appShell .logo{
        width: 42px;
        height: 42px;
        border-radius: 12px;
      }

      .appShell .headerActions{
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
      }

      .appShell .headerActions .searchWrap{
        order: 1;
      }

      .appShell .headerActions #companyFilter{
        min-width: 178px;
        height: 44px;
      }

      .appShell #currentUser{
        min-height: 48px;
      }

      .appShell #currentUser .userChipText strong{
        font-size: 13px;
      }

      .appShell #currentUser .userChipText small{
        font-size: 11px;
      }

      .appShell #currentUser .userChipAvatar{
        width: 34px;
        min-width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 13px;
      }
    }

    @media (max-width: 620px){
      .appShell .topbar{
        padding: 9px;
      }

      .appShell .brandMain{
        gap: 7px;
      }

      .appShell .brandTitle{
        font-size: 24px;
      }

      .appShell .brandCompanyTitle{
        font-size: 12px;
      }

      .appShell .headerActions{
        justify-content: flex-start;
      }

      .appShell .headerActions #companyFilter{
        min-width: 154px;
        max-width: 54vw;
      }
    }

    /* Figma-Like Typography + Modern Ticket Creator */
    .appShell,
    .appShell button,
    .appShell input,
    .appShell select,
    .appShell textarea{
      font-family: var(--font-figma);
    }

    .appShell #modalBackdrop .modal{
      width: min(1120px, 100%);
      max-height: calc(100dvh - 26px);
      border-radius: 20px;
      border: 1px solid #dbe3f1;
      background: #ffffff;
      box-shadow: 0 26px 58px rgba(15, 23, 42, 0.24);
      overflow: hidden;
    }

    .appShell #modalBackdrop .modalHead{
      padding: 18px 22px 16px;
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-bottom: 0;
    }

    .appShell #modalBackdrop .modalHead h2{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-size: 24px;
      font-weight: 800;
      color: #ffffff;
      letter-spacing: 0;
    }

    .appShell #modalBackdrop .modalHead h2::before{
      content: "✦";
      font-size: 16px;
      opacity: 0.95;
    }

    .appShell #modalBackdrop #closeModalBtn{
      min-height: 40px;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.45);
      background: rgba(255, 255, 255, 0.16);
      color: #ffffff;
      font-weight: 700;
    }

    .appShell #modalBackdrop #closeModalBtn:hover{
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.62);
      transform: none;
    }

    .appShell #modalBackdrop .modalBody{
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 16px;
      padding: 20px 22px 16px;
      background: linear-gradient(180deg, #f8f9fc 0%, #f5f7ff 100%);
      max-height: calc(100dvh - 214px);
    }

    .appShell #modalBackdrop .modalTicketField{
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 18px;
      transition: all 0.3s ease;
    }

    .appShell #modalBackdrop .modalTicketField:hover{
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .appShell #modalBackdrop .modalTicketFieldCustomer{
      grid-column: span 5;
      border-top: 3px solid #3b82f6;
    }

    .appShell #modalBackdrop .modalTicketFieldOrder{
      grid-column: span 7;
      border-top: 3px solid #6366f1;
    }

    .appShell #modalBackdrop .modalTicketFieldMain{
      grid-column: 1 / -1;
      border-top: 3px solid #10b981;
    }

    .appShell #modalBackdrop .fieldTitle{
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eef2f7;
      align-items: flex-end;
    }

    .appShell #modalBackdrop .fieldTitle strong{
      font-size: 18px;
      font-weight: 700;
      color: #1e293b;
      line-height: 1.25;
    }

    .appShell #modalBackdrop .fieldTitle .hint{
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
    }

    .appShell #modalBackdrop .label{
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 7px;
    }

    .appShell #modalBackdrop textarea,
    .appShell #modalBackdrop input,
    .appShell #modalBackdrop select{
      border: 1px solid #d7e1f0;
      border-radius: 12px;
      background: #ffffff;
      color: #1e293b;
      padding: 11px 13px;
      font-size: 14px;
      font-weight: 600;
      min-height: 44px;
      transition: all 0.3s ease;
    }

    .appShell #modalBackdrop textarea{
      min-height: 94px;
    }

    .appShell #modalBackdrop input::placeholder,
    .appShell #modalBackdrop textarea::placeholder{
      color: #94a3b8;
      font-weight: 500;
    }

    .appShell #modalBackdrop textarea:focus,
    .appShell #modalBackdrop input:focus,
    .appShell #modalBackdrop select:focus{
      border-color: #818cf8;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
      outline: none;
    }

    .appShell #modalBackdrop .row{
      margin-top: 12px;
      gap: 14px;
    }

    .appShell #modalBackdrop .uploads{
      margin-top: 12px;
      padding: 10px;
      border-radius: 12px;
      border: 1px dashed #d7e1f0;
      background: #f8faff;
    }

    .appShell #modalBackdrop .uploads .btn{
      min-height: 40px;
      border-radius: 10px;
      border: 1px solid #d7e1f0;
      background: #ffffff;
      color: #334155;
      font-weight: 700;
      padding: 9px 14px;
    }

    .appShell #modalBackdrop .uploads .btn:hover{
      background: #eef2ff;
      border-color: #818cf8;
      color: #4338ca;
      transform: none;
    }

    .appShell #modalBackdrop .uploads .chip{
      border: 1px solid #c7d2fe;
      background: #eef2ff;
      color: #4338ca;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 12px;
    }

    .appShell #modalBackdrop .previewGrid{
      gap: 12px;
      margin-top: 12px;
    }

    .appShell #modalBackdrop .preview{
      width: 96px;
      height: 96px;
      border-radius: 14px;
      border: 1px solid #dbe3f1;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.09);
      background: #ffffff;
    }

    .appShell #modalBackdrop .preview button{
      width: 28px;
      height: 28px;
      border-radius: 10px;
      border: 1px solid #fecaca;
      background: #ffffff;
      color: #ef4444;
      font-size: 14px;
      line-height: 1;
    }

    .appShell #modalBackdrop #orderInventorySearch,
    .appShell #modalBackdrop #customerAreaSearch{
      border-radius: 12px;
      min-height: 44px;
    }

    .appShell #modalBackdrop .orderInventoryDropdown,
    .appShell #modalBackdrop .customerAreaDropdown{
      border: 1px solid #dbe3f1;
      border-radius: 14px;
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
      padding: 6px;
      top: calc(100% + 6px);
    }

    .appShell #modalBackdrop .orderInventoryOption{
      grid-template-columns: 52px minmax(0, 1fr);
      border-radius: 12px;
      padding: 7px;
      transition: all 0.2s ease;
    }

    .appShell #modalBackdrop .customerAreaOption{
      grid-template-columns: minmax(0, 1fr);
      border-radius: 12px;
      padding: 9px 10px;
      transition: all 0.2s ease;
    }

    .appShell #modalBackdrop .orderInventoryOption:hover{
      background: #f8faff;
    }

    .appShell #modalBackdrop .orderInventoryOption.selected{
      background: #eef2ff;
      outline: 1px solid rgba(99, 102, 241, 0.35);
    }

    .appShell #modalBackdrop .orderInventoryOptionImg{
      width: 52px;
      height: 52px;
      border-radius: 12px;
      border: 1px solid #dbe3f1;
    }

    .appShell #modalBackdrop .orderInventoryOptionName{
      font-size: 13px;
      font-weight: 800;
      color: #1e293b;
    }

    .appShell #modalBackdrop .customerAreaOption .orderInventoryOptionName{
      font-size: 13px;
      font-weight: 800;
      color: #1e293b;
    }

    .appShell #modalBackdrop .orderInventoryOptionMeta{
      font-size: 12px;
      color: #64748b;
      font-weight: 600;
    }

    .appShell #modalBackdrop .customerAreaOption .orderInventoryOptionMeta{
      font-size: 12px;
      color: #64748b;
      font-weight: 600;
    }

    .appShell #modalBackdrop #orderInventoryProductPreview{
      margin-top: 10px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px dashed #c7d2fe;
      background: #eef2ff;
      color: #4338ca;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell #modalBackdrop #orderSelectedProducts{
      min-height: 52px;
      padding: 9px;
      border: 1px dashed #d7e1f0;
      border-radius: 12px;
      background: #fafbff;
      margin-top: 0;
    }

    .appShell #modalBackdrop .orderSelectedProductsEmpty{
      border: 1px dashed #dbe3f1;
      border-radius: 10px;
      background: #ffffff;
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      padding: 8px 10px;
    }

    .appShell #modalBackdrop .orderSelectedItem{
      border: 1px solid #c7d2fe;
      background: #eef2ff;
      border-radius: 12px;
      padding: 6px 10px;
      gap: 9px;
      max-width: 100%;
    }

    .appShell #modalBackdrop .orderSelectedItemImg{
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid #dbe3f1;
      background: #ffffff;
    }

    .appShell #modalBackdrop .orderSelectedItemText{
      color: #334155;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell #modalBackdrop .orderSelectedItemRemove{
      width: 24px;
      height: 24px;
      border: 0;
      background: #ffffff;
      color: #4338ca;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 800;
    }

    .appShell #modalBackdrop #orderCostSummaryWrap{
      margin-top: 10px !important;
      padding: 9px 11px;
      border-radius: 10px;
      border: 1px solid #bbf7d0;
      background: #ecfdf5;
      color: #065f46;
      font-size: 13px;
      font-weight: 700;
    }

    .appShell #modalBackdrop #orderCostSummaryWrap strong{
      font-weight: 800;
    }

    .appShell #modalBackdrop .modalFoot{
      padding: 14px 22px 16px;
      border-top: 1px solid #e2e8f0;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .appShell #modalBackdrop .modalFoot .smallNote{
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.65;
    }

    .appShell #modalBackdrop #saveDraftBtn{
      border-radius: 10px;
      border: 1px solid #dbe3f1;
      background: #f8fafc;
      color: #334155;
      font-size: 13px;
      font-weight: 700;
      padding: 10px 16px;
    }

    .appShell #modalBackdrop #saveDraftBtn:hover{
      background: #eef2ff;
      border-color: #c7d2fe;
      color: #4338ca;
    }

    .appShell #modalBackdrop #createTicketBtn,
    .appShell #modalBackdrop #addOrderInventoryProductBtn{
      border-radius: 10px;
      border: 1px solid rgba(99, 102, 241, 0.45);
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      color: #ffffff;
      font-size: 14px;
      font-weight: 800;
      box-shadow: 0 10px 24px rgba(99, 102, 241, 0.28);
    }

    .appShell #modalBackdrop #createTicketBtn{
      padding: 10px 20px;
    }

    .appShell #modalBackdrop #createTicketBtn:hover,
    .appShell #modalBackdrop #addOrderInventoryProductBtn:hover{
      filter: brightness(1.04);
      transform: translateY(-1px);
    }

    @media (max-width: 1160px){
      .appShell #modalBackdrop .modalTicketFieldCustomer,
      .appShell #modalBackdrop .modalTicketFieldOrder{
        grid-column: span 6;
      }
    }

    @media (max-width: 960px){
      .appShell #modalBackdrop .modal{
        border-radius: 16px;
        max-height: calc(100dvh - 16px);
      }

      .appShell #modalBackdrop .modalHead{
        padding: 16px 14px;
      }

      .appShell #modalBackdrop .modalHead h2{
        font-size: 21px;
      }

      .appShell #modalBackdrop .modalBody{
        padding: 14px;
        gap: 12px;
        max-height: calc(100dvh - 184px);
      }

      .appShell #modalBackdrop .modalTicketFieldCustomer,
      .appShell #modalBackdrop .modalTicketFieldOrder,
      .appShell #modalBackdrop .modalTicketFieldMain{
        grid-column: 1 / -1;
      }

      .appShell #modalBackdrop .modalFoot{
        padding: 12px 14px 14px;
      }

      .appShell #modalBackdrop .modalFoot > div:last-child{
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
      }

      .appShell #modalBackdrop .modalFoot > div:last-child .btn{
        width: 100%;
        justify-content: center;
      }
    }

    @media (max-width: 620px){
      .appShell #modalBackdrop .modalHead h2{
        font-size: 18px;
      }

      .appShell #modalBackdrop .fieldTitle strong{
        font-size: 16px;
      }

      .appShell #modalBackdrop .fieldTitle .hint{
        font-size: 12px;
      }

      .appShell #modalBackdrop textarea,
      .appShell #modalBackdrop input,
      .appShell #modalBackdrop select{
        font-size: 15px;
      }

      .appShell #modalBackdrop .preview{
        width: 84px;
        height: 84px;
      }

      .appShell #modalBackdrop .modalFoot > div:last-child{
        grid-template-columns: 1fr;
      }
    }

    /* Ticket modal sizing + close button visibility fixes */
    .appShell #modalBackdrop{
      align-items: flex-start;
      overflow-y: auto;
      padding-top: max(10px, calc(var(--safe-top) + 10px));
      padding-bottom: max(10px, calc(var(--safe-bottom) + 10px));
    }

    .appShell #modalBackdrop .modal{
      width: min(1120px, calc(100vw - 24px));
      margin: 0 auto;
      min-height: 0;
    }

    .appShell #modalBackdrop .modalHead{
      position: sticky;
      top: 0;
      z-index: 6;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .appShell #modalBackdrop .modalHead h2{
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .appShell #modalBackdrop #closeModalBtn{
      flex: 0 0 auto;
      min-width: 86px;
      justify-content: center;
      white-space: nowrap;
    }

    @media (max-width: 620px){
      .appShell #modalBackdrop{
        padding-top: max(6px, calc(var(--safe-top) + 6px));
        padding-bottom: max(6px, calc(var(--safe-bottom) + 6px));
      }

      .appShell #modalBackdrop .modal{
        width: calc(100vw - 12px);
      }

      .appShell #modalBackdrop .modalHead{
        padding: 12px 10px;
      }

      .appShell #modalBackdrop .modalHead h2::before{
        display: none;
      }

      .appShell #modalBackdrop #closeModalBtn{
        min-width: 74px;
        min-height: 36px;
        padding: 0 10px;
      }
    }

    .appShell #modalBackdrop .phoneMergeNotice{
      margin-top: 12px;
      border: 1px solid #c7d2fe;
      border-radius: 12px;
      background: #eef2ff;
      padding: 10px;
    }

    .appShell #modalBackdrop .phoneMergeHead{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .appShell #modalBackdrop .phoneMergeHead strong{
      color: #3730a3;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
    }

    .appShell #modalBackdrop .phoneMergeHead .chip{
      border: 1px solid #a5b4fc;
      background: #ffffff;
      color: #4338ca;
      font-size: 11px;
      font-weight: 800;
      padding: 5px 10px;
    }

    .appShell #modalBackdrop .phoneMergeList{
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .appShell #modalBackdrop .phoneMergeItem{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid #dbe3f1;
      border-radius: 10px;
      background: #ffffff;
      padding: 8px;
    }

    .appShell #modalBackdrop .phoneMergeItemMeta{
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .appShell #modalBackdrop .phoneMergeItemMeta strong{
      color: #1e293b;
      font-size: 12px;
      font-weight: 800;
    }

    .appShell #modalBackdrop .phoneMergeItemMeta span{
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
    }

    .appShell #modalBackdrop .phoneMergeBtn{
      min-height: 34px;
      border-radius: 8px;
      border: 1px solid rgba(99, 102, 241, 0.42);
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      color: #ffffff;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      box-shadow: 0 8px 18px rgba(99, 102, 241, 0.22);
    }

    .appShell #modalBackdrop .phoneMergeLocked{
      color: #94a3b8;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    @media (max-width: 620px){
      .appShell #modalBackdrop .phoneMergeItem{
        flex-direction: column;
        align-items: stretch;
      }

      .appShell #modalBackdrop .phoneMergeBtn{
        width: 100%;
        justify-content: center;
      }
    }

    /* Daily Tasks - Figma Style Refresh */
    .appShell #dailyTasksSection{
      background: #eef2f7;
      border: 1px solid #dde5f2;
      border-radius: 20px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
      padding: 22px;
      font-family: var(--font-figma);
    }

    .appShell #dailyTasksSection .tasksHead{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      grid-template-areas:
        "title composer toggle"
        "native native native";
      align-items: center;
      gap: 12px;
      border-bottom: 0;
      margin-bottom: 10px;
      padding-bottom: 0;
    }

    .appShell #dailyTasksSection .tasksTitleWrap{
      grid-area: title;
      justify-self: end;
      text-align: right;
    }

    .appShell #dailyTasksSection .tasksTitleWrap h2{
      font-size: 42px;
      font-weight: 800;
      color: #1f2937;
      margin: 0;
      line-height: 1.1;
    }

    .appShell #dailyTasksSection .tasksTitleWrap h2::before{
      display: none;
    }

    .appShell #dailyTasksSection .tasksTitleWrap p{
      margin: 8px 0 0;
      font-size: 34px;
      font-weight: 600;
      color: #7b8ba4;
      line-height: 1.3;
    }

    .appShell #dailyTasksSection .taskComposerToggleBtn{
      grid-area: composer;
      justify-self: start;
      min-height: 56px;
      border-radius: 18px;
      border: 1px solid rgba(99, 102, 241, 0.45);
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      color: #ffffff;
      padding: 0 24px;
      font-size: 27px;
      font-weight: 800;
      gap: 10px;
      box-shadow: 0 10px 22px rgba(99, 102, 241, 0.22);
      transition: all 0.3s ease;
    }

    .appShell #dailyTasksSection .taskComposerToggleBtn:hover{
      filter: brightness(1.06);
      transform: translateY(-1px);
    }

    .appShell #dailyTasksSection .taskComposerToggleBtn > span:first-child{
      font-size: 34px;
      line-height: 1;
      font-weight: 700;
      transition: transform 0.3s ease;
    }

    .appShell #dailyTasksSection .taskComposerToggleBtn.active > span:first-child{
      transform: rotate(45deg);
    }

    .appShell #dailyTasksSection .sectionToggleBtn{
      grid-area: toggle;
      justify-self: start;
    }

    .appShell #dailyTasksSection .tasksFiltersNative{
      grid-area: native;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      margin-top: 2px;
    }

    .appShell #dailyTasksSection .tasksFiltersNative select{
      display: none;
    }

    .appShell #dailyTasksSection .tasksFiltersNative input{
      width: 150px;
      min-width: 150px;
      min-height: 38px;
      border: 1px solid #dbe3f0;
      border-radius: 10px;
      background: #ffffff;
      color: #475569;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .tasksFiltersNative input:focus{
      outline: none;
      border-color: rgba(99, 102, 241, 0.44);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }

    .appShell #dailyTasksSection .tasksFiltersNative #refreshTasksBtn{
      min-height: 38px;
      border-radius: 12px;
      border: 1px solid rgba(99, 102, 241, 0.34);
      background: #eef2ff;
      color: #4338ca;
      font-size: 13px;
      font-weight: 700;
      padding: 0 14px;
    }

    .appShell #dailyTasksSection .taskStatsGrid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin-top: 16px;
    }

    .appShell #dailyTasksSection .taskStatCard{
      border: 1px solid #d7dfea;
      background: #ffffff;
      border-radius: 22px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      padding: 22px 22px 18px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: center;
      justify-items: end;
      transition: all 0.3s ease;
    }

    .appShell #dailyTasksSection .taskStatCard:hover{
      transform: translateY(-4px);
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
    }

    .appShell #dailyTasksSection .taskStatIcon{
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
    }

    .appShell #dailyTasksSection .taskStatIcon svg{
      width: 27px;
      height: 27px;
      fill: none;
      stroke: #ffffff;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .appShell #dailyTasksSection .taskStatCard--total .taskStatIcon{
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .appShell #dailyTasksSection .taskStatCard--waiting .taskStatIcon{
      background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
    }

    .appShell #dailyTasksSection .taskStatCard--progress .taskStatIcon{
      background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
    }

    .appShell #dailyTasksSection .taskStatCard--completed .taskStatIcon{
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    }

    .appShell #dailyTasksSection .taskStatLabel{
      font-size: 30px;
      font-weight: 700;
      color: #6b7a92;
      line-height: 1.25;
      width: 100%;
      text-align: right;
    }

    .appShell #dailyTasksSection .taskStatValue{
      font-size: 56px;
      line-height: 1;
      font-weight: 800;
      color: #1f2937;
      width: 100%;
      text-align: right;
    }

    .appShell #dailyTasksSection .taskStageFilters{
      margin-top: 18px;
      border: 1px solid #dbe3f0;
      background: #ffffff;
      border-radius: 22px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      padding: 16px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .appShell #dailyTasksSection .taskStageChip{
      min-height: 48px;
      border: 1px solid #e2e8f0;
      background: #eff3fb;
      color: #334155;
      border-radius: 16px;
      font-size: 31px;
      font-weight: 700;
      line-height: 1;
      padding: 0 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .appShell #dailyTasksSection .taskStageChip:hover{
      filter: brightness(1.03);
    }

    .appShell #dailyTasksSection .taskStageChip.active{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-color: rgba(99, 102, 241, 0.45);
      color: #ffffff;
      box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
    }

    .appShell #dailyTasksSection.mobile-collapsed .taskStatsGrid,
    .appShell #dailyTasksSection.mobile-collapsed .taskStageFilters{
      display: none;
    }

    .appShell #dailyTasksSection .tasksGrid--daily{
      margin-top: 18px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 14px;
    }

    .appShell #dailyTasksSection.composer-open .tasksGrid--daily{
      grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
    }

    .appShell #dailyTasksSection .taskComposer{
      display: none;
      border: 1px solid #dbe3f0;
      background: #ffffff;
      border-radius: 18px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      padding: 16px;
    }

    .appShell #dailyTasksSection.composer-open .taskComposer{
      display: block;
    }

    .appShell #dailyTasksSection .taskComposerHead{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .appShell #dailyTasksSection .taskComposer .fieldTitle{
      margin-bottom: 0;
      border-bottom: 0;
      padding-bottom: 0;
    }

    .appShell #dailyTasksSection .taskComposer .fieldTitle strong{
      font-size: 14px;
      color: #1e293b;
    }

    .appShell #dailyTasksSection .taskComposer .hint{
      font-size: 12px;
      color: #64748b;
    }

    .appShell #dailyTasksSection .taskComposerCloseBtn{
      min-height: 34px;
      border-radius: 10px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskListWrap{
      border: 1px solid #dbe3f0;
      background: #ffffff;
      border-radius: 18px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      padding: 14px;
      min-height: 160px;
      min-width: 0;
    }

    .appShell #dailyTasksSection:not(.composer-open) .taskListWrap{
      grid-column: 1 / -1;
    }

    .appShell #dailyTasksSection .taskList{
      gap: 12px;
    }

    .appShell #dailyTasksSection .taskCard{
      border: 1px solid #dbe3f0;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      padding: 14px;
      transition: all 0.3s ease;
    }

    .appShell #dailyTasksSection .taskCard:hover{
      transform: translateY(-2px);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.13);
    }

    .appShell #dailyTasksSection .taskCardTopRow{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .appShell #dailyTasksSection .taskCardIconActions{
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .appShell #dailyTasksSection .taskIconBtn{
      width: 34px;
      min-width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid #d8dfed;
      background: #ffffff;
      color: #64748b;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .appShell #dailyTasksSection .taskIconBtn:hover{
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    .appShell #dailyTasksSection .taskIconBtn:disabled{
      opacity: 0.55;
      cursor: not-allowed;
    }

    .appShell #dailyTasksSection .taskIconBtn svg{
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .appShell #dailyTasksSection .taskIconBtn--danger{
      color: #ef4444;
      border-color: rgba(239, 68, 68, 0.35);
      background: #fff5f5;
    }

    .appShell #dailyTasksSection .taskIconBtn--danger:hover{
      background: #fee2e2;
      border-color: rgba(239, 68, 68, 0.5);
    }

    .appShell #dailyTasksSection .taskCardTopState{
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .appShell #dailyTasksSection .taskStatus{
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      padding: 8px 12px;
      color: #334155;
      background: #eef2ff;
      white-space: nowrap;
    }

    .appShell #dailyTasksSection .taskStatus.waiting{
      background: #fef3c7;
      color: #92400e;
      border-color: #fcd34d;
    }

    .appShell #dailyTasksSection .taskStatus.inProgress{
      background: #ede9fe;
      color: #6d28d9;
      border-color: #c4b5fd;
    }

    .appShell #dailyTasksSection .taskStatus.completed{
      background: #d1fae5;
      color: #065f46;
      border-color: #6ee7b7;
    }

    .appShell #dailyTasksSection .taskCheckBtn{
      width: 36px;
      min-width: 36px;
      height: 36px;
      border: 1px solid #cfd8ea;
      border-radius: 999px;
      background: #ffffff;
      color: #64748b;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .appShell #dailyTasksSection .taskCheckBtn:hover{
      border-color: #10b981;
      color: #10b981;
      background: #ecfdf5;
    }

    .appShell #dailyTasksSection .taskCheckBtn:disabled{
      opacity: 0.58;
      cursor: not-allowed;
    }

    .appShell #dailyTasksSection .taskCheckBtn svg{
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .appShell #dailyTasksSection .taskCheckDone{
      width: 36px;
      min-width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid #d6dbe8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: transparent;
      background: #f8fafc;
      font-size: 17px;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .taskCheckDone.isDone{
      border-color: #10b981;
      background: #ecfdf5;
      color: #10b981;
    }

    .appShell #dailyTasksSection .taskCardHead{
      display: block;
      margin-bottom: 6px;
    }

    .appShell #dailyTasksSection .taskTitle{
      margin: 0;
      color: #1e293b;
      font-size: 28px;
      font-weight: 800;
      line-height: 1.3;
    }

    .appShell #dailyTasksSection .taskMetaRow{
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .appShell #dailyTasksSection .taskMetaItem{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #dbe3f0;
      background: #f8fbff;
      border-radius: 10px;
      padding: 6px 10px;
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
      white-space: nowrap;
    }

    .appShell #dailyTasksSection .taskMetaItem svg{
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.85;
    }

    .appShell #dailyTasksSection .taskMetaInline{
      margin-top: 8px;
      color: #8a99ae;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskText{
      margin-top: 9px;
      color: #334155;
      font-size: 13px;
      line-height: 1.65;
      font-weight: 600;
      white-space: pre-wrap;
    }

    .appShell #dailyTasksSection .taskTextMuted{
      color: #94a3b8;
      font-weight: 600;
    }

    .appShell #dailyTasksSection .taskComment{
      margin-top: 10px;
      border-top: 1px dashed #d5dfec;
      padding-top: 10px;
      font-size: 12px;
      color: #334155;
      line-height: 1.7;
    }

    .appShell #dailyTasksSection .taskComment strong{
      color: #1e293b;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .taskActionRow{
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .appShell #dailyTasksSection .taskActionRow textarea{
      min-height: 92px;
      border-radius: 12px;
      border: 1px solid #dbe3f0;
      background: #f8fbff;
      color: #1e293b;
      font-size: 13px;
      line-height: 1.6;
      padding: 10px 12px;
      resize: vertical;
      transition: all 0.3s ease;
    }

    .appShell #dailyTasksSection .taskActionRow textarea:focus{
      outline: none;
      border-color: rgba(99, 102, 241, 0.48);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
      background: #ffffff;
    }

    .appShell #dailyTasksSection .taskActionRow .btn{
      align-self: flex-start;
      min-height: 38px;
      border-radius: 10px;
      padding: 0 14px;
      font-size: 13px;
      font-weight: 700;
      border-color: rgba(99, 102, 241, 0.32);
      background: #eef2ff;
      color: #4338ca;
    }

    .appShell #dailyTasksSection .taskActionRow .btn:hover{
      filter: brightness(1.02);
    }

    .appShell #dailyTasksSection .taskDoneMeta{
      color: #16a34a;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .tasksWarning{
      border-radius: 12px;
      font-size: 12px;
      margin-bottom: 10px;
    }

    .appShell #dailyTasksSection .tasksEmpty{
      border: 1px dashed #d2dbe9;
      border-radius: 14px;
      background: #f8fbff;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      padding: 18px 12px;
    }

    @media (max-width: 1080px){
      .appShell #dailyTasksSection{
        padding: 16px;
      }

      .appShell #dailyTasksSection .tasksTitleWrap h2{
        font-size: 34px;
      }

      .appShell #dailyTasksSection .tasksTitleWrap p{
        font-size: 24px;
      }

      .appShell #dailyTasksSection .taskComposerToggleBtn{
        font-size: 20px;
        min-height: 50px;
      }

      .appShell #dailyTasksSection .taskComposerToggleBtn > span:first-child{
        font-size: 28px;
      }

      .appShell #dailyTasksSection .taskStatsGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .appShell #dailyTasksSection .taskStatLabel{
        font-size: 22px;
      }

      .appShell #dailyTasksSection .taskStatValue{
        font-size: 42px;
      }

      .appShell #dailyTasksSection .taskStageChip{
        font-size: 21px;
      }

      .appShell #dailyTasksSection .taskTitle{
        font-size: 22px;
      }
    }

    @media (max-width: 760px){
      .appShell #dailyTasksSection .tasksHead{
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "title title"
          "composer toggle"
          "native native";
      }

      .appShell #dailyTasksSection .tasksFiltersNative{
        flex-wrap: wrap;
      }

      .appShell #dailyTasksSection .tasksFiltersNative input{
        width: calc(50% - 4px);
        min-width: 0;
      }

      .appShell #dailyTasksSection .tasksFiltersNative #refreshTasksBtn{
        width: 100%;
        justify-content: center;
      }

      .appShell #dailyTasksSection .tasksTitleWrap{
        justify-self: stretch;
      }

      .appShell #dailyTasksSection .tasksTitleWrap h2{
        font-size: 28px;
      }

      .appShell #dailyTasksSection .tasksTitleWrap p{
        font-size: 17px;
      }

      .appShell #dailyTasksSection .taskComposerToggleBtn{
        min-height: 44px;
        font-size: 16px;
        padding: 0 16px;
      }

      .appShell #dailyTasksSection .taskComposerToggleBtn > span:first-child{
        font-size: 24px;
      }

      .appShell #dailyTasksSection .taskStatsGrid{
        grid-template-columns: 1fr;
      }

      .appShell #dailyTasksSection .taskStatCard{
        border-radius: 16px;
        padding: 14px;
      }

      .appShell #dailyTasksSection .taskStatIcon{
        width: 48px;
        height: 48px;
      }

      .appShell #dailyTasksSection .taskStatLabel{
        font-size: 16px;
      }

      .appShell #dailyTasksSection .taskStatValue{
        font-size: 34px;
      }

      .appShell #dailyTasksSection .taskStageFilters{
        border-radius: 16px;
        padding: 10px;
      }

      .appShell #dailyTasksSection .taskStageChip{
        min-height: 40px;
        border-radius: 12px;
        font-size: 14px;
        padding: 0 12px;
      }

      .appShell #dailyTasksSection .taskCard{
        border-radius: 14px;
        padding: 12px;
      }

      .appShell #dailyTasksSection .taskTitle{
        font-size: 18px;
      }

      .appShell #dailyTasksSection .taskMetaItem{
        font-size: 11px;
      }
    }

    /* Mobile UX polish (final override) */
    @media (max-width: 900px){
      .appShell .topbar{
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
          "menu brand"
          "actions actions";
        align-items: center;
        gap: 10px;
        padding: 10px max(12px, var(--safe-right)) 10px max(12px, var(--safe-left));
      }

      .appShell .topMenuBtn{
        grid-area: menu;
      }

      .appShell .brandMain{
        grid-area: brand;
        min-width: 0;
        justify-self: end;
      }

      .appShell .brandText{
        align-items: flex-end;
        text-align: right;
      }

      .appShell .brandTitle{
        font-size: clamp(20px, 5.8vw, 30px);
        line-height: 1.1;
      }

      .appShell .brandCompanyTitle{
        font-size: clamp(11px, 2.9vw, 14px);
      }

      .appShell .headerActions{
        grid-area: actions;
        width: 100%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
          "quick company signout"
          "user user user";
        gap: 8px;
        align-items: center;
        justify-content: stretch;
      }

      .appShell .headerActions .actionsQuick{
        grid-area: quick;
        margin: 0;
        justify-self: start;
      }

      .appShell .headerActions .searchWrap{
        grid-area: company;
        min-width: 0;
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
      }

      .appShell .headerActions #companyFilter{
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 44px;
        border-radius: 12px;
        padding-inline: 12px 36px;
      }

      .appShell .actions > .btn.ghost[onclick="signOut()"]{
        grid-area: signout;
        justify-self: end;
      }

      .appShell #currentUser{
        grid-area: user;
        width: 100%;
        margin: 0 !important;
        min-height: 46px;
        padding: 8px 10px;
        border-radius: 12px;
        justify-content: space-between;
      }

      .appShell #currentUser .userChipText strong{
        font-size: 13px;
      }

      .appShell #currentUser .userChipText small{
        font-size: 11px;
      }

      .appShell .headerNotifPanel{
        right: 0;
        width: min(420px, calc(100vw - 16px));
      }

      .appShell .appLayout{
        display: block;
        padding: 0;
      }

      .appShell .container{
        padding: 0 max(10px, var(--safe-right)) max(14px, var(--safe-bottom)) max(10px, var(--safe-left));
      }

      .appShell .dashboardSection,
      .appShell .ordersTableSection,
      .appShell .tasksSection,
      .appShell .expensesSection,
      .appShell .collectionsSection,
      .appShell .inventorySection,
      .appShell .driveSection,
      .appShell .hrSection,
      .appShell .settingsSection,
      .appShell .financeTabs{
        margin-top: 10px;
        border-radius: 14px;
        padding: 12px;
      }

      .appShell .dashboardStatsGrid{
        gap: 10px;
      }

      .appShell .dashboardStatCard{
        min-height: 0;
        border-radius: 14px;
        padding: 12px;
      }

      .appShell .tasksHead{
        gap: 8px;
      }

      .appShell .tasksFilters{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .appShell .tasksFilters select,
      .appShell .tasksFilters input,
      .appShell .tasksFilters button{
        width: 100%;
      }

      .appShell .financeRange{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .appShell .inventoryTopBar{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      .appShell .inventoryTabs{
        width: 100%;
      }

      .appShell .inventoryTabs .btn{
        flex: 1 1 0;
        justify-content: center;
      }

      .appShell #inventoryComposerToggleBtn{
        width: 100%;
        justify-content: center;
      }

      .appShell .driveActions{
        flex-direction: column;
        align-items: stretch;
      }

      .appShell .driveActions .btn{
        width: 100%;
        justify-content: center;
      }

      .appShell #dailyTasksSection{
        padding: 14px;
      }

      .appShell #dailyTasksSection .tasksTitleWrap h2{
        font-size: 24px;
      }

      .appShell #dailyTasksSection .tasksTitleWrap p{
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.45;
      }

      .appShell #dailyTasksSection .taskStatsGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .appShell #dailyTasksSection .taskStatCard{
        border-radius: 14px;
        padding: 12px;
        gap: 8px;
      }

      .appShell #dailyTasksSection .taskStatIcon{
        width: 42px;
        height: 42px;
        border-radius: 12px;
      }

      .appShell #dailyTasksSection .taskStatIcon svg{
        width: 22px;
        height: 22px;
      }

      .appShell #dailyTasksSection .taskStatLabel{
        font-size: 13px;
      }

      .appShell #dailyTasksSection .taskStatValue{
        font-size: 28px;
      }

      .appShell #dailyTasksSection .taskStageFilters{
        padding: 10px;
        border-radius: 14px;
        gap: 8px;
      }

      .appShell #dailyTasksSection .taskStageChip{
        min-height: 38px;
        border-radius: 10px;
        font-size: 13px;
        padding: 0 10px;
      }

      .appShell .ordersTableToolbar{
        align-items: stretch;
      }

      .appShell .ordersStatusTabs{
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 2px;
      }

      .appShell .ordersStatusTab{
        flex: 0 0 auto;
        min-height: 36px;
        padding: 7px 12px;
        font-size: 12px;
      }

      .appShell .ordersTableToolbarActions{
        width: 100%;
        justify-content: space-between;
      }

      .appShell .ordersTableCreateBtn{
        min-height: 38px;
        padding: 8px 12px;
        font-size: 13px;
      }

      .appShell .sidebarPanel{
        width: min(340px, 92vw);
      }

      .appShell .sidebarNav .btn{
        min-height: 52px;
        font-size: 15px;
      }
    }

    @media (max-width: 760px){
      .appShell .ordersTableWrap{
        border: 0;
        background: transparent;
        overflow: visible;
      }

      .appShell .ordersTable{
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
      }

      .appShell .ordersTable thead{
        display: none;
      }

      .appShell .ordersTable tbody{
        display: block;
      }

      .appShell .ordersTable tbody tr.ordersTableRow,
      .appShell .ordersTable tbody tr.ordersTableMetaRow{
        display: block;
      }

      .appShell .ordersTable tbody tr.ordersTableRow{
        margin-top: 10px;
        border: 1px solid #dbe3f1;
        border-radius: 14px 14px 0 0;
        background: #ffffff;
        overflow: hidden;
      }

      .appShell .ordersTable tbody tr.ordersTableMetaRow{
        border: 1px solid #dbe3f1;
        border-top: 0;
        border-radius: 0 0 14px 14px;
        background: #f8fafc;
        margin-bottom: 6px;
      }

      .appShell .ordersTable tbody tr.ordersTableRow td{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 9px 10px;
        border-bottom: 1px dashed #e7edf6;
        white-space: normal;
        text-align: right;
      }

      .appShell .ordersTable tbody tr.ordersTableRow td:last-child{
        display: block;
        border-bottom: 0;
      }

      .appShell .ordersTable tbody tr.ordersTableMetaRow td{
        display: block;
        padding: 10px;
        border-bottom: 0;
        background: transparent;
      }

      .appShell .ordersTable tbody tr.ordersTableRow td::before{
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
      }

      .appShell .ordersTable tbody tr.ordersTableRow td:nth-child(1)::before{ content: "رقم الطلب"; }
      .appShell .ordersTable tbody tr.ordersTableRow td:nth-child(2)::before{ content: "العميل"; }
      .appShell .ordersTable tbody tr.ordersTableRow td:nth-child(3)::before{ content: "الكمية"; }
      .appShell .ordersTable tbody tr.ordersTableRow td:nth-child(4)::before{ content: "المبلغ"; }
      .appShell .ordersTable tbody tr.ordersTableRow td:nth-child(5)::before{ content: "الحالة"; }
      .appShell .ordersTable tbody tr.ordersTableRow td:nth-child(6)::before{ content: "التاريخ"; }
      .appShell .ordersTable tbody tr.ordersTableRow td:nth-child(7)::before{
        content: "الإجراءات";
        display: block;
        margin-bottom: 8px;
      }

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

      .appShell .ordersTableActionBtn{
        width: 100%;
        min-width: 0;
        height: 34px;
      }

      .appShell .ordersTableSendBtn{
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        justify-content: center;
      }

      .appShell .ordersStatusMenu{
        width: 100%;
      }

      .appShell .ordersStatusMenuToggle{
        width: 100%;
        justify-content: space-between;
      }

      .appShell .ordersStatusMenuList{
        inset-inline-start: 0;
        inset-inline-end: auto;
        min-width: 100%;
      }

      .appShell .ordersTableMetaInline{
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .appShell .ordersTableMetaChip{
        width: 100%;
        justify-content: space-between;
        border-radius: 10px;
        padding: 6px 8px;
        white-space: normal;
      }
    }

    @media (max-width: 620px){
      .appShell .viewDock{
        display: none !important;
      }

      .appShell .topbar{
        gap: 8px;
      }

      .appShell .logo{
        width: 40px;
        height: 40px;
        border-radius: 12px;
      }

      .appShell .brandMain{
        gap: 8px;
      }

      .appShell .brandTitle{
        font-size: 20px;
      }

      .appShell .brandCompanyTitle{
        font-size: 11px;
      }

      .appShell .headerActions{
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
          "quick signout"
          "company company"
          "user user";
      }

      .appShell .headerActions .actionsQuick{
        justify-self: start;
      }

      .appShell .headerActions #companyFilter{
        height: 42px;
        font-size: 13px;
      }

      .appShell .actions > .btn.ghost[onclick="signOut()"]{
        width: 38px;
        min-width: 38px;
        height: 38px;
      }

      .appShell #currentUser{
        padding: 7px 9px;
        min-height: 44px;
      }

      .appShell #dailyTasksSection .taskStatsGrid{
        grid-template-columns: 1fr;
      }

      .appShell .financeRange{
        grid-template-columns: 1fr;
      }

      .appShell #modalBackdrop{
        padding-top: max(6px, calc(var(--safe-top) + 6px));
        padding-inline: max(6px, var(--safe-right)) max(6px, var(--safe-left));
        padding-bottom: max(8px, calc(var(--safe-bottom) + 8px));
      }

      .appShell #modalBackdrop .modal{
        width: 100%;
        max-height: calc(100dvh - 8px);
        border-radius: 14px;
      }

      .appShell #modalBackdrop .modalHead{
        padding: 10px;
        gap: 8px;
      }

      .appShell #modalBackdrop .modalHead h2{
        font-size: 16px;
      }

      .appShell #modalBackdrop #closeModalBtn{
        min-height: 34px;
        min-width: 68px;
      }

      .appShell #modalBackdrop .modalBody{
        padding: 10px;
        gap: 10px;
        max-height: calc(100dvh - 154px);
      }

      .appShell #modalBackdrop .modalTicketField{
        padding: 12px;
        border-radius: 12px;
      }

      .appShell #modalBackdrop .row{
        grid-template-columns: 1fr !important;
        gap: 10px;
      }

      .appShell #modalBackdrop .modalFoot{
        padding: 10px;
        gap: 8px;
      }

      .appShell #modalBackdrop .modalFoot > div:last-child{
        width: 100%;
      }

      .appShell #modalBackdrop #createTicketBtn{
        width: 100%;
        min-height: 44px;
        justify-content: center;
      }
    }

    /* Phone header fix (latest override) */
    @media (max-width: 760px){
      .appShell .topbar{
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-areas:
          "menu brand"
          "actions actions";
        align-items: center;
        gap: 8px;
        min-height: 0;
        padding: 9px max(10px, var(--safe-right)) 9px max(10px, var(--safe-left));
      }

      .appShell .topMenuBtn{
        grid-area: menu;
        width: 36px;
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
      }

      .appShell .brandMain{
        grid-area: brand;
        justify-self: end;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .appShell .brandText{
        min-width: 0;
        align-items: flex-end;
        text-align: right;
      }

      .appShell .brandTitle{
        font-size: 18px;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .appShell .brandTitle::after{
        display: none;
      }

      .appShell .brandCompanyTitle{
        font-size: 11px;
        line-height: 1.2;
        max-width: 54vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .appShell .logo{
        width: 38px;
        height: 38px;
        border-radius: 11px;
      }

      .appShell .headerActions{
        grid-area: actions;
        width: 100%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
          "quick company signout"
          "user user user";
        align-items: center;
        gap: 7px;
        margin: 0;
      }

      .appShell .headerActions .actionsQuick{
        grid-area: quick;
        justify-self: start;
        margin: 0;
      }

      .appShell .headerActions .searchWrap{
        grid-area: company;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
      }

      .appShell .headerActions #companyFilter{
        display: block !important;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 40px;
        border-radius: 10px;
        font-size: 13px;
        padding-inline: 10px 32px;
      }

      .appShell .actions > .btn.ghost[onclick="signOut()"]{
        grid-area: signout;
        justify-self: end;
        width: 36px;
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
      }

      .appShell .notifBellBtn{
        width: 36px;
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
      }

      .appShell .appNotifUnreadBadge--bell{
        min-width: 18px;
        height: 18px;
        font-size: 10px;
        line-height: 16px;
      }

      .appShell #currentUser{
        grid-area: user;
        width: 100%;
        margin: 0 !important;
        min-height: 42px;
        border-radius: 10px;
        padding: 6px 8px;
        gap: 8px;
      }

      .appShell #currentUser .userChipText strong{
        font-size: 12px;
      }

      .appShell #currentUser .userChipText small{
        font-size: 10px;
      }

      .appShell #currentUser .userChipAvatar{
        width: 30px;
        min-width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 11px;
      }

      .appShell .headerNotifPanel{
        top: calc(100% + 6px);
        right: 0;
        width: min(360px, calc(100vw - 12px));
        max-width: calc(100vw - 12px);
      }
    }

    @media (max-width: 620px){
      .appShell .dashboardStatsGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
      }

      .appShell #dailyTasksSection .taskStatsGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
      }
    }

    /* Mobile sidebar must stay above header */
    @media (max-width: 960px){
      .appShell .sidebarBackdrop{
        position: fixed !important;
        inset: 0 !important;
        z-index: 220 !important;
        overflow: visible !important;
        pointer-events: none;
      }

      .appShell .sidebarBackdrop.open{
        pointer-events: auto;
      }

      .appShell .sidebarShade{
        display: block !important;
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
      }

      .appShell .sidebarPanel{
        position: absolute !important;
        top: 0;
        right: 0;
        height: 100dvh;
        max-height: 100dvh;
        width: min(340px, 92vw);
        z-index: 221;
        transform: translateX(105%);
      }

      .appShell .sidebarBackdrop.open .sidebarPanel{
        transform: translateX(0);
      }
    }

    /* Orders table: keep real table + horizontal scroll on small screens */
    @media (max-width: 760px){
      .appShell .ordersTableWrap{
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
      }

      .appShell .ordersTable{
        width: 100% !important;
        min-width: 980px !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
      }

      .appShell .ordersTable thead{
        display: table-header-group !important;
      }

      .appShell .ordersTable tbody{
        display: table-row-group !important;
      }

      .appShell .ordersTable tbody tr.ordersTableRow,
      .appShell .ordersTable tbody tr.ordersTableMetaRow{
        display: table-row !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
      }

      .appShell .ordersTable tbody tr.ordersTableRow td,
      .appShell .ordersTable tbody tr.ordersTableMetaRow td{
        display: table-cell !important;
        padding: 12px 10px !important;
        text-align: right !important;
        vertical-align: middle !important;
      }

      .appShell .ordersTable tbody tr.ordersTableRow td{
        background: #ffffff;
        border-top: 1px solid #cbd5e1 !important;
        border-bottom: 0 !important;
      }

      .appShell .ordersTable tbody tr.ordersTableRow td:first-child{
        border-inline-start: 1px solid #cbd5e1 !important;
        border-top-right-radius: 10px;
      }

      .appShell .ordersTable tbody tr.ordersTableRow td:last-child{
        border-inline-end: 1px solid #cbd5e1 !important;
        border-top-left-radius: 10px;
      }

      .appShell .ordersTable tbody tr.ordersTableMetaRow td{
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-top: 0 !important;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
      }

      .appShell .ordersTable tbody tr.ordersTableRow td::before{
        content: none !important;
        display: none !important;
      }

      .appShell .ordersTableActions{
        display: inline-flex !important;
        grid-template-columns: none !important;
      }

      .appShell .ordersTableSendBtn{
        grid-column: auto !important;
        width: auto !important;
        max-width: 170px !important;
      }

      .appShell .ordersStatusMenu{
        width: auto !important;
      }

      .appShell .ordersStatusMenuToggle{
        width: auto !important;
      }

      .appShell .ordersStatusMenuList{
        min-width: 140px !important;
      }

      .appShell .ordersTableMetaInline{
        display: flex !important;
        grid-template-columns: none !important;
        gap: 8px !important;
      }
    }

    /* Mobile typography tune (final override) */
    @media (max-width: 760px){
      .appShell{
        font-size: 14px;
        line-height: 1.45;
      }

      .appShell .dashboardTitleWrap h2,
      .appShell .tasksTitleWrap h2{
        font-size: 20px !important;
        line-height: 1.25 !important;
      }

      .appShell .dashboardTitleWrap p,
      .appShell .tasksTitleWrap p,
      .appShell .dashboardPanelNote,
      .appShell .smallNote,
      .appShell .hint,
      .appShell .sub,
      .appShell .label{
        font-size: 12px !important;
        line-height: 1.5;
      }

      .appShell .btn{
        min-height: 38px;
        font-size: 13px !important;
        font-weight: 700;
      }

      .appShell input,
      .appShell select,
      .appShell textarea{
        font-size: 14px !important;
      }

      .appShell .ordersTable thead th{
        font-size: 13px !important;
      }

      .appShell .ordersTable tbody td{
        font-size: 13px !important;
      }

      .appShell .ordersTableMetaChip,
      .appShell .ordersTableStatus,
      .appShell .ordersStatusMenuItem{
        font-size: 12px !important;
      }

      .appShell .dashboardStatLabel{
        font-size: 12px !important;
      }

      .appShell .dashboardStatValue{
        font-size: 24px !important;
      }

      .appShell .dashboardSaleItem span{
        font-size: 12px !important;
      }

      .appShell .dashboardSaleItem strong{
        font-size: 17px !important;
      }

      .appShell #dailyTasksSection .taskTitle{
        font-size: 16px !important;
        line-height: 1.35;
      }

      .appShell #dailyTasksSection .taskText{
        font-size: 12px !important;
        line-height: 1.6;
      }

      .appShell #dailyTasksSection .taskMetaItem,
      .appShell #dailyTasksSection .taskStatus{
        font-size: 11px !important;
      }

      .appShell #dailyTasksSection .taskStatLabel{
        font-size: 12px !important;
      }

      .appShell #dailyTasksSection .taskStatValue{
        font-size: 24px !important;
      }

      .appShell #dailyTasksSection .taskStageChip{
        font-size: 12px !important;
      }

      .appShell #modalBackdrop .modalHead h2{
        font-size: 17px !important;
      }

      .appShell #modalBackdrop .fieldTitle strong{
        font-size: 14px !important;
      }

      .appShell #modalBackdrop .fieldTitle .hint,
      .appShell #modalBackdrop .label,
      .appShell #modalBackdrop .modalFoot .smallNote{
        font-size: 11.5px !important;
      }

      .appShell #modalBackdrop textarea,
      .appShell #modalBackdrop input,
      .appShell #modalBackdrop select{
        font-size: 14px !important;
      }
    }

    @media (max-width: 620px){
      .appShell{
        font-size: 13px;
      }

      .appShell .dashboardTitleWrap h2,
      .appShell .tasksTitleWrap h2{
        font-size: 18px !important;
      }

      .appShell .btn{
        min-height: 36px;
        font-size: 12.5px !important;
      }

      .appShell input,
      .appShell select,
      .appShell textarea{
        font-size: 13.5px !important;
      }

      .appShell .ordersTable thead th,
      .appShell .ordersTable tbody td{
        font-size: 12.5px !important;
      }

      .appShell .dashboardStatValue{
        font-size: 22px !important;
      }

      .appShell #dailyTasksSection .taskTitle{
        font-size: 15px !important;
      }

      .appShell #dailyTasksSection .taskStatValue{
        font-size: 22px !important;
      }

      .appShell #modalBackdrop .modalHead h2{
        font-size: 16px !important;
      }
    }

    @media (max-width: 820px){
      html,
      body,
      .appShell{
        overflow-x: clip;
        overscroll-behavior-x: none;
      }

      .appShell .appLayout,
      .appShell .container,
      .appShell main{
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
      }

      .appShell input,
      .appShell select,
      .appShell textarea{
        font-size: 16px !important;
      }

      .appShell .btn:hover,
      .appShell .card:hover,
      .appShell .taskCard:hover,
      .appShell .expenseItem:hover,
      .appShell .collectionItem:hover,
      .appShell .inventoryItem:hover,
      .appShell .driveItem:hover,
      .appShell .hrAttendanceItem:hover,
      .appShell .appNotifItem:hover{
        transform: none !important;
      }
    }

    .appShell #modalBackdrop{
      z-index: 3200 !important;
    }

    .appShell #modalBackdrop .modal{
      width: min(960px, calc(100vw - 28px));
      max-height: calc(100dvh - 22px);
    }

    @media (max-width: 620px){
      .appShell #modalBackdrop .modal{
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 14px) !important;
      }

      .appShell #modalBackdrop .row{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    /* Orders table lift + clear strokes (final) */
    .appShell .ordersTableWrap{
      border: 1.5px solid #cbd5e1 !important;
      border-radius: 14px !important;
      background: #ffffff !important;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
    }

    .appShell .ordersTable{
      border-collapse: separate !important;
      border-spacing: 0 !important;
    }

    .appShell .ordersTable thead th{
      background: #f8fbff;
      border-bottom: 1.5px solid #cbd5e1 !important;
      color: #475569;
      font-size: 14px;
      font-weight: 800;
      padding: 16px 12px;
    }

    .appShell .ordersTable tbody tr.ordersTableRow td{
      background: #ffffff;
      border-top: 1.5px solid #cbd5e1 !important;
      border-bottom: 0 !important;
      padding: 16px 12px !important;
      font-size: 14px;
      font-weight: 700;
    }

    .appShell .ordersTable tbody tr.ordersTableRow td:first-child{
      border-inline-start: 1.5px solid #cbd5e1 !important;
      border-top-right-radius: 10px;
    }

    .appShell .ordersTable tbody tr.ordersTableRow td:last-child{
      border-inline-end: 1.5px solid #cbd5e1 !important;
      border-top-left-radius: 10px;
    }

    .appShell .ordersTable tbody tr.ordersTableMetaRow td{
      background: #ffffff !important;
      border: 1.5px solid #cbd5e1 !important;
      border-top: 0 !important;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      padding: 12px 10px !important;
      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
    }

    .appShell .ordersTableMetaInline{
      gap: 10px;
    }

    .appShell .ordersTableStatus{
      font-size: 12.5px;
      font-weight: 800;
      padding: 6px 12px;
    }

    .appShell .ordersTableActionBtn{
      width: 36px;
      min-width: 36px;
      height: 36px;
      border-radius: 9px;
    }

    .appShell .ordersTableSendBtn{
      min-height: 36px;
      padding: 7px 12px;
      border-radius: 9px;
      font-size: 12.5px;
      font-weight: 800;
      max-width: 190px !important;
    }

    @media (max-width: 760px){
      .appShell .ordersTableWrap{
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
      }

      .appShell .ordersTable{
        min-width: 1040px !important;
      }

      .appShell .ordersTable thead th{
        font-size: 13.5px !important;
        padding: 15px 12px !important;
      }

      .appShell .ordersTable tbody tr.ordersTableRow td{
        padding: 15px 12px !important;
        font-size: 13.5px !important;
      }

      .appShell .ordersTable tbody tr.ordersTableMetaRow td{
        padding: 12px 10px !important;
      }

      .appShell .ordersTableMetaChip{
        font-size: 12.5px !important;
        padding: 6px 10px;
      }
    }

    @media (max-width: 760px){
      .appShell .ordersTableMetaInline{
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 6px !important;
      }

      .appShell .ordersTableMetaChip{
        width: auto !important;
        flex: 0 0 auto;
        justify-content: flex-start !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 5px 9px !important;
      }
    }

    /* Daily tasks compact + cleaner alignment */
    .appShell #dailyTasksSection{
      padding: 16px !important;
      border-radius: 16px !important;
    }

    .appShell #dailyTasksSection .tasksHead{
      gap: 8px !important;
      margin-bottom: 10px !important;
      padding-bottom: 6px !important;
    }

    .appShell #dailyTasksSection .taskStatsGrid{
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 10px !important;
      margin-top: 10px !important;
    }

    .appShell #dailyTasksSection .taskStatCard{
      border-radius: 14px !important;
      padding: 12px !important;
      min-height: 0 !important;
      gap: 8px !important;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
    }

    .appShell #dailyTasksSection .taskStatIcon{
      width: 42px !important;
      height: 42px !important;
      border-radius: 12px !important;
      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12) !important;
    }

    .appShell #dailyTasksSection .taskStatIcon svg{
      width: 20px !important;
      height: 20px !important;
    }

    .appShell #dailyTasksSection .taskStatLabel{
      font-size: 13px !important;
      line-height: 1.35 !important;
    }

    .appShell #dailyTasksSection .taskStatValue{
      font-size: 26px !important;
      line-height: 1.05 !important;
    }

    .appShell #dailyTasksSection .taskStageFilters{
      margin-top: 12px !important;
      padding: 8px !important;
      border-radius: 14px !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 8px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch;
    }

    .appShell #dailyTasksSection .taskStageChip{
      min-height: 36px !important;
      border-radius: 10px !important;
      font-size: 12px !important;
      padding: 0 12px !important;
      white-space: nowrap !important;
      flex: 0 0 auto;
    }

    .appShell #dailyTasksSection .tasksGrid--daily{
      margin-top: 12px !important;
      gap: 10px !important;
    }

    .appShell #dailyTasksSection .taskListWrap{
      border-radius: 14px !important;
      padding: 10px !important;
    }

    .appShell #dailyTasksSection .taskCard{
      border-radius: 12px !important;
      padding: 10px !important;
    }

    .appShell #dailyTasksSection .taskCardTopRow{
      margin-bottom: 8px !important;
    }

    .appShell #dailyTasksSection .taskTitle{
      font-size: 15px !important;
      line-height: 1.35 !important;
    }

    .appShell #dailyTasksSection .taskMetaRow{
      margin-top: 8px !important;
      gap: 6px !important;
    }

    .appShell #dailyTasksSection .taskMetaItem{
      border-radius: 9px !important;
      padding: 5px 8px !important;
      font-size: 11px !important;
    }

    .appShell #dailyTasksSection .taskText{
      margin-top: 8px !important;
      font-size: 12px !important;
    }

    @media (max-width: 980px){
      .appShell #dailyTasksSection .taskStatsGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 620px){
      .appShell #dailyTasksSection{
        padding: 12px !important;
      }

      .appShell #dailyTasksSection .taskStatsGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
      }

      .appShell #dailyTasksSection .taskStatCard{
        padding: 10px !important;
      }

      .appShell #dailyTasksSection .taskStatLabel{
        font-size: 12px !important;
      }

      .appShell #dailyTasksSection .taskStatValue{
        font-size: 22px !important;
      }

      .appShell #dailyTasksSection .taskTitle{
        font-size: 14px !important;
      }
    }

    /* Finance redesign - figma style */
    .appShell #financeHero{
      margin-top: 14px !important;
      border: 1px solid #e2e8f0 !important;
      border-radius: 20px !important;
      background: #f8f9fc !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
      padding: 18px !important;
    }

    .appShell #financeHero .financeHeroHead{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .appShell #financeHero .financeHeroTitle h2{
      margin: 0;
      font-size: 42px;
      font-weight: 800;
      color: #1e293b;
      line-height: 1.08;
      letter-spacing: -0.01em;
    }

    .appShell #financeHero .financeHeroTitle p{
      margin: 8px 0 0;
      font-size: 31px;
      font-weight: 600;
      color: #64748b;
      line-height: 1.28;
    }

    .appShell #financeHero .financeQuickAddBtn{
      min-height: 54px;
      border-radius: 18px;
      border: 0;
      padding: 0 24px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 27px;
      font-weight: 700;
      color: #ffffff;
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
      transition: all 0.3s ease;
    }

    .appShell #financeHero .financeQuickAddBtn:hover{
      filter: brightness(1.06);
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(99, 102, 241, 0.34);
    }

    .appShell #financeHero .financeQuickAddPlus{
      font-size: 30px;
      font-weight: 700;
      line-height: 1;
    }

    .appShell #financeHero .financeHeroStats{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
      align-items: stretch;
    }

    .appShell #financeHero .financeHeroStat{
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      justify-content: flex-start;
      gap: 10px;
      min-height: 184px;
      transition: all 0.3s ease;
    }

    .appShell #financeHero .financeHeroStat:hover{
      transform: translateY(-2px);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    }

    .appShell #financeHero .financeHeroStatIcon{
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
    }

    .appShell #financeHero .financeHeroStatIcon svg{
      width: 26px;
      height: 26px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .appShell #financeHero .financeHeroStat--collections .financeHeroStatIcon{ background: #10b981; }
    .appShell #financeHero .financeHeroStat--expenses .financeHeroStatIcon{ background: #ef4444; }
    .appShell #financeHero .financeHeroStat--net .financeHeroStatIcon{ background: #3b82f6; }
    .appShell #financeHero .financeHeroStat--profit .financeHeroStatIcon{ background: #f59e0b; }
    .appShell #financeHero .financeHeroStat--ops .financeHeroStatIcon{ background: #7c3aed; }

    .appShell #financeHero .financeHeroStatLabel{
      color: #64748b;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.4;
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .appShell #financeHero .financeHeroStatValue{
      color: #1e293b;
      font-size: 34px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-top: auto;
      width: 100%;
      text-align: center;
    }

    .appShell #financeHero .financeHeroStat--ops .financeHeroStatValue{
      font-size: 38px;
    }

    .appShell #financeHero .financeHeroStatValue--positive{
      color: #16a34a;
    }

    .appShell #financeHero .financeHeroStat--net .financeHeroStatValue{
      color: #2563eb;
    }

    .appShell #financeHero .financeHeroStatValue--negative,
    .appShell #financeHero .financeHeroStatValue.neg{
      color: #dc2626;
    }

    .appShell #financeTabs{
      margin-top: 12px !important;
      border-radius: 18px !important;
      border: 1px solid #e2e8f0 !important;
      background: #ffffff !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
      padding: 10px !important;
      display: inline-flex !important;
      gap: 10px !important;
      align-items: center;
    }

    .appShell #financeTabs .financeTabBtn{
      min-height: 44px;
      border-radius: 12px;
      border: 1px solid #d9e2ef;
      background: #f1f5f9;
      color: #334155;
      font-size: 18px;
      font-weight: 700;
      padding: 0 18px;
      transition: all 0.3s ease;
    }

    .appShell #financeTabs .financeTabBtn:hover{
      filter: brightness(1.04);
    }

    .appShell #financeTabs .financeTabBtn.active{
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      border-color: rgba(99, 102, 241, 0.45);
      color: #ffffff;
      box-shadow: 0 8px 18px rgba(99, 102, 241, 0.28);
    }

    .appShell .financePanelSection{
      border: 1px solid #e2e8f0 !important;
      border-radius: 18px !important;
      background: #ffffff !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
      padding: 16px !important;
      margin-top: 12px !important;
    }

    .appShell .financePanelSection .financePanelHead{
      border: 1px solid #e6edf6;
      border-radius: 16px;
      background: #f8fafd;
      padding: 12px;
      margin-bottom: 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .appShell #expensesSectionHead .tasksTitleWrap h2::before,
    .appShell #collectionsSectionHead .tasksTitleWrap h2::before{
      display: none !important;
      content: none !important;
    }

    .appShell .financePanelSection .tasksTitleWrap h2{
      font-size: 23px;
      font-weight: 700;
      color: #1e293b;
    }

    .appShell .financePanelSection .tasksTitleWrap p{
      font-size: 14px;
      color: #64748b;
      font-weight: 500;
      margin-top: 5px;
      line-height: 1.5;
    }

    .appShell .financePanelSection .sectionToggleBtn{
      display: none !important;
    }

    .appShell .financePanelSection .tasksFilters{
      width: auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-inline-start: auto;
    }

    .appShell .financePanelSection .financeRange{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
    }

    .appShell .financePanelSection .financeRange input{
      width: 170px;
      min-width: 0;
      max-width: 170px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid #d8e1ef;
      background: #ffffff;
      color: #1e293b;
      font-size: 16px;
      font-weight: 600;
      padding: 0 12px;
      transition: all 0.3s ease;
    }

    .appShell .financePanelSection .financeRange input:focus{
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }

    .appShell .financePanelSection #refreshExpensesBtn,
    .appShell .financePanelSection #refreshCollectionsBtn{
      min-height: 40px;
      border-radius: 12px;
      border: 1px solid #d8e1ef;
      background: #ffffff;
      color: #1e293b;
      font-size: 14px;
      font-weight: 700;
      padding: 0 16px;
      transition: all 0.3s ease;
    }

    .appShell .financePanelSection #refreshExpensesBtn:hover,
    .appShell .financePanelSection #refreshCollectionsBtn:hover{
      border-color: #6366f1;
      color: #4338ca;
    }

    .appShell #expensesSection .expensesGrid,
    .appShell #collectionsSection .collectionsGrid{
      display: grid;
      grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
      gap: 14px;
    }

    .appShell #expenseFormCard,
    .appShell #collectionFormCard,
    .appShell #expensesSection .expenseListWrap,
    .appShell #collectionsSection .collectionListWrap{
      border: 1px solid #e2e8f0 !important;
      border-radius: 16px !important;
      background: #ffffff !important;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
      padding: 14px !important;
    }

    .appShell #expenseFormCard .label,
    .appShell #collectionFormCard .label{
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      margin-bottom: 6px;
    }

    .appShell #expenseFormCard input,
    .appShell #expenseFormCard textarea,
    .appShell #expenseFormCard select,
    .appShell #collectionFormCard input,
    .appShell #collectionFormCard textarea,
    .appShell #collectionFormCard select{
      border-radius: 12px;
      border: 1px solid #d8e1ef;
      background: #f8fafc;
      min-height: 42px;
      font-size: 14px;
      color: #1e293b;
      transition: all 0.3s ease;
    }

    .appShell #expenseFormCard textarea,
    .appShell #collectionFormCard textarea{
      min-height: 86px;
      resize: vertical;
    }

    .appShell #expenseFormCard input:focus,
    .appShell #expenseFormCard textarea:focus,
    .appShell #expenseFormCard select:focus,
    .appShell #collectionFormCard input:focus,
    .appShell #collectionFormCard textarea:focus,
    .appShell #collectionFormCard select:focus{
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
      background: #ffffff;
    }

    .appShell #addExpenseBtn,
    .appShell #addCollectionBtn{
      min-height: 42px;
      border-radius: 12px;
      border: 0;
      font-size: 14px;
      font-weight: 700;
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      color: #ffffff;
      box-shadow: 0 8px 18px rgba(99, 102, 241, 0.24);
    }

    .appShell #addExpenseBtn:hover,
    .appShell #addCollectionBtn:hover{
      filter: brightness(1.05);
    }

    .appShell #expensesTotal,
    .appShell #collectionsSection .financialStats{
      display: none !important;
    }

    .appShell .financeListHead{
      display: grid;
      grid-template-columns: 120px 92px minmax(220px, 1fr) 140px 118px;
      align-items: center;
      gap: 10px;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      background: #f1f5fb;
      color: #475569;
      font-size: 14px;
      font-weight: 700;
      padding: 12px 14px;
      margin-bottom: 10px;
    }

    .appShell .expenseList,
    .appShell .collectionList{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .appShell .financeTxnItem{
      border: 1px solid #e2e8f0 !important;
      border-radius: 14px !important;
      background: #ffffff !important;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
      padding: 10px 12px !important;
    }

    .appShell .financeTxnRow{
      display: grid;
      grid-template-columns: 120px 92px minmax(220px, 1fr) 140px 118px;
      align-items: center;
      gap: 10px;
    }

    .appShell .financeTxnCell{
      min-width: 0;
      font-size: 14px;
      color: #1e293b;
    }

    .appShell .financeTxnCellDate{
      color: #64748b;
      font-weight: 600;
      white-space: nowrap;
      font-size: 13px;
    }

    .appShell .financeTypeBadge{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      border-radius: 999px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .appShell .financeTypeBadgeExpense{
      background: #fee2e2;
      border-color: #fca5a5;
      color: #991b1b;
    }

    .appShell .financeTypeBadgeCollection{
      background: #d1fae5;
      border-color: #6ee7b7;
      color: #065f46;
    }

    .appShell .financeDescMain{
      color: #0f172a;
      font-weight: 700;
      font-size: 14px;
      line-height: 1.4;
    }

    .appShell .financeDescSub{
      margin-top: 2px;
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
    }

    .appShell .financeDescNote{
      margin-top: 4px;
      color: #475569;
      font-size: 12px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .appShell .expenseAmount,
    .appShell .collectionAmount{
      font-size: 20px !important;
      font-weight: 800 !important;
      white-space: nowrap;
    }

    .appShell .expenseAmount{ color: #dc2626 !important; }
    .appShell .collectionAmount{ color: #16a34a !important; }

    .appShell .financeTxnCellActions{
      display: flex;
      justify-content: flex-end;
    }

    .appShell .financeTxnCellActions .btn.danger{
      min-height: 34px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
      padding: 0 12px;
    }

    .appShell .financeTxnThumbs{
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed #dbe4f1;
    }

    .appShell .financeTxnThumbs .thumbs{
      justify-content: flex-start;
      gap: 8px;
    }

    .appShell .financeTxnThumbs .thumbs img{
      width: 42px;
      height: 42px;
      border-radius: 10px;
      border: 1px solid #dbe4f1;
    }

    .appShell .financeQuickPulse{
      animation: financeQuickPulse 0.85s ease;
    }

    @keyframes financeQuickPulse{
      0%{ box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.32); }
      100%{ box-shadow: 0 0 0 16px rgba(99, 102, 241, 0); }
    }

    @media (max-width: 1180px){
      .appShell #financeHero .financeHeroTitle h2{
        font-size: 34px;
      }

      .appShell #financeHero .financeHeroTitle p{
        font-size: 24px;
      }

      .appShell #financeHero .financeQuickAddBtn{
        font-size: 22px;
      }

      .appShell #financeHero .financeHeroStatLabel{
        font-size: 16px;
      }

      .appShell #financeHero .financeHeroStatValue{
        font-size: 30px;
      }

      .appShell #financeHero .financeHeroStat--ops .financeHeroStatValue{
        font-size: 34px;
      }

      .appShell #financeHero .financeHeroStats{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 980px){
      .appShell #financeHero .financeHeroHead{
        flex-direction: column-reverse;
        align-items: stretch;
      }

      .appShell #financeHero .financeQuickAddBtn{
        width: fit-content;
        margin-inline-start: auto;
      }

      .appShell #expensesSection .expensesGrid,
      .appShell #collectionsSection .collectionsGrid{
        grid-template-columns: 1fr;
      }

      .appShell .financePanelSection .financePanelHead{
        grid-template-columns: 1fr;
      }

      .appShell .financePanelSection .tasksFilters{
        width: 100%;
        justify-content: flex-start;
      }

      .appShell .financePanelSection.mobile-collapsed .tasksFilters{
        display: none !important;
      }

      .appShell .financePanelSection.mobile-collapsed .expensesGrid,
      .appShell .financePanelSection.mobile-collapsed .collectionsGrid{
        display: none !important;
      }
    }

    @media (max-width: 760px){
      .appShell #financeHero{
        padding: 12px !important;
        border-radius: 16px !important;
      }

      .appShell #financeHero .financeHeroTitle h2{
        font-size: 26px;
      }

      .appShell #financeHero .financeHeroTitle p{
        font-size: 16px;
        margin-top: 4px;
      }

      .appShell #financeHero .financeQuickAddBtn{
        min-height: 44px;
        border-radius: 14px;
        padding: 0 14px;
        font-size: 16px;
      }

      .appShell #financeHero .financeQuickAddPlus{
        font-size: 22px;
      }

      .appShell #financeHero .financeHeroStats{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .appShell #financeHero .financeHeroStat{
        min-height: 132px;
        border-radius: 14px;
        padding: 10px 8px;
      }

      .appShell #financeHero .financeHeroStatIcon{
        width: 44px;
        height: 44px;
        border-radius: 13px;
      }

      .appShell #financeHero .financeHeroStatIcon svg{
        width: 21px;
        height: 21px;
      }

      .appShell #financeHero .financeHeroStatLabel{
        font-size: 14px;
        min-height: 38px;
      }

      .appShell #financeHero .financeHeroStatValue{
        font-size: 23px;
      }

      .appShell #financeTabs{
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .appShell #financeTabs .financeTabBtn{
        width: 100%;
        font-size: 14px;
        min-height: 40px;
        border-radius: 10px;
      }

      .appShell .financePanelSection{
        padding: 12px !important;
        border-radius: 15px !important;
      }

      .appShell .financePanelSection .financePanelHead{
        padding: 10px;
        border-radius: 13px;
      }

      .appShell .financePanelSection .tasksTitleWrap h2{
        font-size: 18px;
      }

      .appShell .financePanelSection .tasksTitleWrap p{
        font-size: 12px;
      }

      .appShell .financePanelSection .tasksFilters{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .appShell .financePanelSection .financeRange{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .appShell .financePanelSection .financeRange input{
        width: 100%;
        max-width: none;
        min-width: 0;
      }

      .appShell .financePanelSection #refreshExpensesBtn,
      .appShell .financePanelSection #refreshCollectionsBtn{
        width: 100%;
      }

      .appShell .financeListHead{
        display: none;
      }

      .appShell .financeTxnItem{
        padding: 10px !important;
      }

      .appShell .financeTxnRow{
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .appShell .financeTxnCell{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px dashed #e7edf6;
        padding-bottom: 6px;
      }

      .appShell .financeTxnCell:last-child{
        border-bottom: 0;
        padding-bottom: 0;
      }

      .appShell .financeTxnCellDate::before{
        content: "التاريخ";
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
      }

      .appShell .financeTxnCellType::before{
        content: "النوع";
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
      }

      .appShell .financeTxnCellDesc{
        display: block;
      }

      .appShell .financeTxnCellDesc::before{
        content: "الوصف";
        display: block;
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 4px;
      }

      .appShell .financeTxnCellAmount::before{
        content: "المبلغ";
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
      }

      .appShell .financeTxnCellActions::before{
        content: "الإجراءات";
        color: #64748b;
        font-size: 11px;
        font-weight: 700;
      }

      .appShell .expenseAmount,
      .appShell .collectionAmount{
        font-size: 16px !important;
      }
    }

    /* Monthly employee ticker enhancements */
    .appShell .monthlyTickerItem{
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .appShell .monthlyTickerItem.isTop{
      border-color: rgba(245, 158, 11, 0.55);
      background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(254, 243, 199, 0.9));
      box-shadow: 0 6px 14px rgba(245, 158, 11, 0.2);
    }

    .appShell .monthlyTickerNameWrap{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .appShell .monthlyTickerCount{
      color: #1e293b;
      font-weight: 700;
      white-space: nowrap;
    }

    .appShell .monthlyTickerTopBadge{
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      border: 1px solid #fbbf24;
      background: #fef3c7;
      color: #92400e;
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      padding: 3px 7px;
      white-space: nowrap;
    }

    .appShell .monthlyTickerTopBadge .monthlyTickerCrown{
      margin-inline-start: 0;
      font-size: 11px;
    }

    /* Company logo initials */
    .appShell .companyLogo{
      overflow: hidden;
      background: #ffffff;
    }

    .appShell .companyLogoInitials{
      width: 100%;
      height: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: inherit;
      background: linear-gradient(135deg, var(--logo-c1, #6366f1) 0%, var(--logo-c2, #8b5cf6) 100%);
      color: #ffffff;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: 0.02em;
      line-height: 1;
      user-select: none;
      text-transform: uppercase;
    }

    @media (max-width: 620px){
      .appShell .companyLogoInitials{
        font-size: 16px;
      }
    }

    .appShell .settingsSection{
      margin-top: 14px;
      border-radius: var(--ui-radius-card);
      border: 1px solid var(--ui-border);
      background: var(--ui-card);
      box-shadow: var(--ui-shadow);
      padding: 16px;
    }

    .appShell .settingsGrid{
      display: grid;
      grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
      gap: 14px;
      align-items: start;
    }

    .appShell .settingsCard{
      border-radius: var(--ui-radius-card);
      border: 1px solid var(--ui-border);
      background: #ffffff;
      box-shadow: var(--ui-shadow);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .appShell .settingsEmailActions{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .appShell .settingsEmailActions .btn{
      min-width: 96px;
      justify-content: center;
    }

    .appShell .settingsWarning{
      border: 1px solid #fecaca;
      background: #fff1f2;
      color: #991b1b;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell .settingsEmailsEmpty{
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
    }

    .appShell .settingsEmailsList{
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .appShell .settingsEmailItem{
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .appShell .settingsEmailMain{
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .appShell .settingsEmailAddress{
      color: #0f172a;
      font-size: 14px;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .appShell .settingsEmailMeta{
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
    }

    .appShell .settingsEmailRemoveBtn{
      min-height: 36px;
      padding: 8px 12px;
      border-radius: 8px;
      color: #b91c1c;
      border-color: #fecaca;
      background: #fff5f5;
    }

    .appShell .settingsDeliveryCard{
      grid-column: 1 / -1;
    }

    .appShell .settingsDeliveryStatusBadge{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #334155;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .appShell .settingsDeliveryStatusBadge.is-on{
      border-color: #86efac;
      background: #ecfdf3;
      color: #166534;
    }

    .appShell .settingsDeliveryStatusBadge.is-pending{
      border-color: #fcd34d;
      background: #fffbeb;
      color: #92400e;
    }

    .appShell .settingsDeliveryStatusBadge.is-off{
      border-color: #cbd5e1;
      background: #f8fafc;
      color: #475569;
    }

    .appShell .settingsDeliveryActions{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-items: center;
    }

    .appShell .settingsDeliveryButtons{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .appShell .settingsDeliveryButtons .btn{
      min-width: 110px;
      justify-content: center;
    }

    .appShell .settingsDeliveryMeta{
      color: #334155;
      font-size: 13px;
      font-weight: 700;
    }

    @media (max-width: 980px){
      .appShell .settingsGrid{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px){
      .appShell .settingsSection{
        padding: 12px;
      }

      .appShell .settingsCard{
        padding: 12px;
      }

      .appShell .settingsEmailActions{
        grid-template-columns: 1fr;
      }

      .appShell .settingsDeliveryActions{
        grid-template-columns: 1fr;
      }

      .appShell .settingsEmailActions .btn{
        width: 100%;
      }

      .appShell .settingsDeliveryButtons{
        flex-direction: column;
      }

      .appShell .settingsDeliveryButtons .btn{
        width: 100%;
      }

      .appShell .settingsEmailItem{
        align-items: flex-start;
        flex-direction: column;
      }

      .appShell .settingsEmailRemoveBtn{
        width: 100%;
        justify-content: center;
      }
    }

    .appShell .settingsStoreSection{
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .appShell .storefrontFeatureNav{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
    }

    .appShell .storefrontFeatureBtn{
      appearance: none;
      border: 1px solid #dbe4f1;
      border-radius: 18px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      text-align: right;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .appShell .storefrontFeatureBtn:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1);
    }

    .appShell .storefrontFeatureBtn.is-active{
      border-color: rgba(79, 70, 229, 0.34);
      background: linear-gradient(180deg, #eef2ff 0%, #ffffff 100%);
      box-shadow: 0 18px 34px rgba(79, 70, 229, 0.14);
    }

    .appShell .storefrontFeatureBtn strong{
      color: #0f172a;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.2;
    }

    .appShell .storefrontFeatureBtn span{
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.55;
    }

    .appShell .storefrontFeatureBadge{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(99, 102, 241, 0.2);
      background: rgba(99, 102, 241, 0.08);
      color: #4338ca;
      font-size: 11px;
      font-weight: 900;
      font-style: normal;
    }

    .appShell .storefrontNavDropdown{
      border: 1px solid #dbe4f1;
      border-radius: 18px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
      overflow: hidden;
      min-width: 0;
    }

    .appShell .storefrontNavDropdown.is-active{
      border-color: rgba(79, 70, 229, 0.34);
      box-shadow: 0 18px 34px rgba(79, 70, 229, 0.14);
    }

    .appShell .storefrontNavDropdownSummary{
      list-style: none;
      cursor: pointer;
      padding: 14px 16px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      text-align: right;
      direction: rtl;
    }

    .appShell .storefrontNavDropdownSummary::-webkit-details-marker{
      display: none;
    }

    .appShell .storefrontNavDropdownSummary::after{
      content: '▼';
      font-size: 10px;
      opacity: 0.45;
      margin-top: 6px;
      flex-shrink: 0;
      line-height: 1;
    }

    .appShell .storefrontNavDropdown[open] .storefrontNavDropdownSummary::after{
      opacity: 0.65;
    }

    .appShell .storefrontNavDropdownSummaryText{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      min-width: 0;
    }

    .appShell .storefrontNavDropdownSummaryText strong{
      color: #0f172a;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.2;
    }

    .appShell .storefrontNavDropdownSummaryText > span{
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.55;
    }

    .appShell .storefrontNavDropdownBody{
      padding: 0 10px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .appShell .storefrontNavDropdownItem{
      appearance: none;
      border: 1px solid #e8eef7;
      border-radius: 12px;
      background: #fff;
      padding: 10px 12px;
      text-align: right;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      width: 100%;
      transition: background .15s ease, border-color .15s ease;
    }

    .appShell .storefrontNavDropdownItem:hover{
      background: #f8fbff;
      border-color: #dbe4f1;
    }

    .appShell .storefrontNavDropdownItem.is-active{
      border-color: rgba(79, 70, 229, 0.4);
      background: linear-gradient(180deg, #eef2ff 0%, #fafbff 100%);
    }

    .appShell .storefrontNavDropdownItem strong{
      font-size: 13px;
      font-weight: 900;
      color: #0f172a;
    }

    .appShell .storefrontNavDropdownItem span{
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      line-height: 1.45;
    }

    .appShell .storeProductSortField{
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: stretch;
      min-width: 120px;
    }

    .appShell .storeProductSortFieldLabel{
      font-size: 11px;
      font-weight: 800;
      color: #64748b;
    }

    .appShell .storeProductSortField input{
      min-height: 38px;
      border-radius: 10px;
      border: 1px solid #dbe4f1;
      padding: 0 10px;
      font-weight: 700;
    }

    .appShell .storeProductSortActions{
      flex-shrink: 0;
    }

    /* متجر إلكتروني — مظهر قريب من لوحات icare (أزرق داكن + تركواز + بطاقات) */
    .appShell #storefrontSection .settingsStoreSection{
      background: #ececec;
      border-radius: 14px;
      padding: 12px;
      margin-top: 4px;
    }

    .appShell #storefrontSection{
      --store-admin-slate: #34495e;
      --store-admin-slate-deep: #2c3e50;
      --store-admin-teal: #17a2a8;
      --store-admin-teal-mid: #1abc9c;
      --store-admin-green: #27ae60;
    }

    .appShell #storefrontSection .storefrontFeatureBtn,
    .appShell #storefrontSection .storefrontNavDropdown{
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: var(--store-admin-slate);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    }

    .appShell #storefrontSection .storefrontFeatureBtn:hover,
    .appShell #storefrontSection .storefrontNavDropdown:hover{
      background: #3d566e;
    }

    .appShell #storefrontSection .storefrontFeatureBtn strong,
    .appShell #storefrontSection .storefrontNavDropdownSummaryText strong{
      color: #fff;
    }

    .appShell #storefrontSection .storefrontFeatureBtn > span,
    .appShell #storefrontSection .storefrontNavDropdownSummaryText > span{
      color: rgba(255, 255, 255, 0.78);
    }

    .appShell #storefrontSection .storefrontFeatureBadge,
    .appShell #storefrontSection .storefrontNavDropdown .storefrontFeatureBadge{
      border-color: rgba(255, 255, 255, 0.28);
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
    }

    .appShell #storefrontSection .storefrontFeatureBtn.is-active,
    .appShell #storefrontSection .storefrontNavDropdown.is-active{
      border-color: var(--store-admin-teal-mid);
      background: linear-gradient(180deg, var(--store-admin-teal-mid) 0%, #16a085 100%);
      box-shadow: 0 8px 22px rgba(22, 160, 133, 0.38);
    }

    .appShell #storefrontSection .storefrontNavDropdownSummary::after{
      color: rgba(255, 255, 255, 0.65);
      opacity: 1;
    }

    .appShell #storefrontSection .storefrontNavDropdownBody{
      background: var(--store-admin-slate-deep);
      padding: 8px;
      border-radius: 0 0 14px 14px;
    }

    .appShell #storefrontSection .storefrontNavDropdownItem{
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .appShell #storefrontSection .storefrontNavDropdownItem strong{
      color: #fff;
    }

    .appShell #storefrontSection .storefrontNavDropdownItem span{
      color: rgba(255, 255, 255, 0.72);
    }

    .appShell #storefrontSection .storefrontNavDropdownItem:hover{
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.18);
    }

    .appShell #storefrontSection .storefrontNavDropdownItem.is-active{
      background: rgba(26, 188, 156, 0.28);
      border-color: var(--store-admin-teal-mid);
      box-shadow: inset 0 0 0 1px rgba(26, 188, 156, 0.35);
    }

    .appShell #storefrontSection .storeProductTabStripWrap{
      margin: 0 0 14px;
    }

    .appShell #storefrontSection .storeProductTabStrip{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 4px 2px 8px;
      scrollbar-width: thin;
    }

    .appShell #storefrontSection .storeProductTab{
      flex: 1 1 auto;
      min-width: fit-content;
      appearance: none;
      border: 0;
      border-radius: 12px;
      padding: 12px 14px;
      background: var(--store-admin-slate);
      color: #fff;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
      transition: background .15s ease, box-shadow .15s ease;
    }

    .appShell #storefrontSection .storeProductTab:hover{
      background: #3d566e;
    }

    .appShell #storefrontSection .storeProductTab.is-active{
      background: linear-gradient(180deg, var(--store-admin-teal-mid) 0%, #16a085 100%);
      box-shadow: 0 6px 18px rgba(22, 160, 133, 0.35);
    }

    .appShell #storefrontSection .storefrontPanel[data-store-panel="products"] .storeAdminPageTitle{
      background: var(--store-admin-slate);
      color: #fff;
      margin: -16px -16px 14px -16px;
      padding: 14px 16px;
      border-radius: var(--ui-radius-card) var(--ui-radius-card) 0 0;
      border-bottom: 3px solid var(--store-admin-teal-mid);
    }

    .appShell #storefrontSection .storefrontPanel[data-store-panel="products"] .storeAdminPageTitle strong{
      color: #fff;
      font-size: 17px;
    }

    .appShell #storefrontSection .storefrontPanel[data-store-panel="products"] .storeAdminPageTitle .hint{
      color: rgba(255, 255, 255, 0.88);
      font-weight: 700;
      margin-top: 6px;
      display: block;
    }

    .appShell #storefrontSection .storefrontPanel[data-store-panel="groups"] .storeAdminPageTitle--static{
      background: var(--store-admin-slate);
      color: #fff;
      margin: -16px -16px 14px -16px;
      padding: 14px 16px;
      border-radius: var(--ui-radius-card) var(--ui-radius-card) 0 0;
      border-bottom: 3px solid var(--store-admin-teal-mid);
    }

    .appShell #storefrontSection .storefrontPanel[data-store-panel="groups"] .storeAdminPageTitle--static strong{
      color: #fff;
      font-size: 17px;
    }

    .appShell #storefrontSection .storefrontPanel[data-store-panel="groups"] .storeAdminPageTitle--static .hint{
      color: rgba(255, 255, 255, 0.88);
      font-weight: 700;
      margin-top: 6px;
      display: block;
    }

    .appShell #storefrontSection .storeAdminSectionCard{
      border: 1px solid #d8dee6;
      border-radius: 12px;
      background: #fff;
      overflow: hidden;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(52, 73, 94, 0.06);
    }

    .appShell #storefrontSection .storeAdminSectionBar{
      background: var(--store-admin-slate);
      color: #fff;
      text-align: center;
      padding: 11px 14px;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.02em;
    }

    .appShell #storefrontSection .storeAdminSectionBody{
      padding: 14px;
    }

    .appShell #storefrontSection .storeAdminHintBox{
      margin: 0;
      padding: 12px 14px;
      background: #eef2f5;
      color: #475569;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.55;
      border-bottom: 1px solid #e2e8f0;
    }

    .appShell #storefrontSection .storefrontPanel[data-store-panel="products"] .settingsStoreField select:not([multiple]):not([size]),
    .appShell #storefrontSection .storeAdminSelect{
      background-color: #eef2f5;
      border-color: #cbd5e1;
      padding-inline: 12px 36px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: left 12px center;
      background-size: 10px auto;
      appearance: none;
    }

    .appShell #storefrontSection .storeAdminFormActions .storeAdminBtnPrimary{
      background: var(--store-admin-green) !important;
      border-color: transparent !important;
      color: #fff !important;
      font-weight: 900;
      border-radius: 12px;
      min-height: 48px;
    }

    .appShell #storefrontSection .storeAdminFormActions .storeAdminBtnPrimary:hover{
      filter: brightness(1.05);
    }

    .appShell #storefrontSection .storeAdminFormActions .storeAdminBtnSecondary{
      border-radius: 12px;
      min-height: 48px;
      font-weight: 800;
    }

    .appShell #storefrontSection .settingsStoreToggle input[type="checkbox"]{
      accent-color: #2563eb;
      width: 20px;
      min-width: 20px;
      height: 20px;
      min-height: 20px;
    }

    .appShell .storefrontPanels{
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .appShell .storefrontPanel{
      display: none;
    }

    .appShell .storefrontPanel.is-active{
      display: block;
    }

    .appShell .settingsStoreHero{
      border-radius: 18px;
      border: 1px solid rgba(59, 130, 246, 0.12);
      background:
        radial-gradient(420px 220px at 100% 0%, rgba(59, 130, 246, 0.12), transparent 62%),
        linear-gradient(180deg, #ffffff, #f8fbff);
      box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .appShell .settingsStoreQuickActions,
    .appShell .settingsStoreActions{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .appShell .settingsStoreQuickActions .btn,
    .appShell .settingsStoreActions .btn{
      justify-content: center;
    }

    .appShell .settingsStoreGrid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      align-items: start;
    }

    .appShell .settingsStoreWideCard{
      grid-column: 1 / -1;
    }

    .appShell .settingsStoreCard{
      gap: 12px;
    }

    .appShell .settingsStoreFormGrid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: start;
    }

    .appShell .settingsStoreField{
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .appShell .settingsStoreField > span{
      color: #334155;
      font-size: 12px;
      font-weight: 800;
    }

    .appShell .settingsStoreField input,
    .appShell .settingsStoreField select,
    .appShell .settingsStoreField textarea{
      width: 100%;
      min-height: 44px;
      border-radius: 12px;
      border: 1px solid #dbe4f1;
      background: #ffffff;
      padding: 10px 12px;
      color: #0f172a;
      outline: none;
    }

    .appShell .settingsStoreField input:focus,
    .appShell .settingsStoreField select:focus,
    .appShell .settingsStoreField textarea:focus{
      border-color: rgba(59, 130, 246, 0.45);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .appShell .settingsStoreField textarea{
      min-height: 96px;
      resize: vertical;
    }

    .appShell .settingsStoreFieldFull{
      grid-column: 1 / -1;
    }

    .appShell .settingsStoreToggle{
      flex-direction: row;
      align-items: center;
      gap: 10px;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid #dbe4f1;
      background: #f8fbff;
      min-height: 48px;
    }

    .appShell .settingsStoreToggle > span{
      margin: 0;
      font-size: 13px;
    }

    .appShell .settingsStoreToggle input{
      width: 18px;
      min-width: 18px;
      height: 18px;
      min-height: 18px;
      padding: 0;
      margin: 0;
      box-shadow: none;
    }

    .appShell .settingsStorePreviewMedia{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
    }

    .appShell .settingsStorePreviewMedia:empty{
      display: none;
    }

    .appShell .settingsStorePreviewMedia img{
      width: 100%;
      min-height: 120px;
      max-height: 180px;
      object-fit: cover;
      border-radius: 14px;
      border: 1px solid #dbe4f1;
      background: #f8fafc;
    }

    .appShell .settingsStoreSourcePreview{
      border-radius: 14px;
      border: 1px dashed #cbd5e1;
      background: #f8fafc;
      padding: 12px 14px;
      color: #475569;
      font-size: 13px;
      line-height: 1.8;
    }

    .appShell .settingsStoreSourcePreview strong{
      color: #0f172a;
    }

    .appShell .settingsStoreList{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .appShell .settingsStoreListItem{
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      background: #f8fbff;
      padding: 12px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      justify-content: space-between;
    }

    .appShell .settingsStoreListMain{
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .appShell .settingsStoreListTitle{
      color: #0f172a;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.5;
    }

    .appShell .settingsStoreListMeta{
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.8;
      white-space: pre-wrap;
    }

    .appShell .settingsStoreListThumb{
      width: 82px;
      min-width: 82px;
      height: 82px;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid #dbe4f1;
      background: #ffffff;
    }

    .appShell .settingsStoreListThumb img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .appShell .settingsStoreListActions{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .appShell .settingsStoreStatus{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid #dbe4f1;
      background: #ffffff;
      color: #334155;
      font-size: 11px;
      font-weight: 800;
    }

    .appShell .settingsStoreStatus.is-good{
      border-color: #86efac;
      background: #ecfdf3;
      color: #166534;
    }

    .appShell .settingsStoreStatus.is-warn{
      border-color: #fcd34d;
      background: #fffbeb;
      color: #92400e;
    }

    .appShell .settingsStoreStatus.is-bad{
      border-color: #fecaca;
      background: #fff1f2;
      color: #991b1b;
    }

    .appShell .settingsStoreSourceSelect{
      min-height: 240px !important;
      padding: 8px;
    }

    .appShell #storefrontSection .storefrontProductSourcePicker{
      width: 100%;
    }

    .appShell #storefrontSection .storefrontProductSourcePicker .orderInventoryDropdown{
      max-height: min(340px, 52vh);
    }

    .appShell .settingsStoreProductList .settingsStoreListItem,
    .appShell .settingsStoreOrdersList .settingsStoreListItem{
      background: linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .appShell .settingsStoreOrderItems{
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 2px;
      color: #334155;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell .settingsStoreOrderStatusRow{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-top: 8px;
    }

    .appShell .settingsStoreOrderStatusRow .btn{
      min-height: 34px;
      padding: 0 12px;
      font-size: 12px;
    }

    @media (max-width: 980px){
      .appShell .settingsStoreGrid,
      .appShell .settingsStoreFormGrid{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px){
      .appShell .storefrontFeatureNav{
        grid-template-columns: 1fr;
      }

      .appShell .storeProductSortActions{
        width: 100%;
      }

      /* المتجر الإلكتروني — تجربة هاتف أنعم (لمس، تمرير، safe-area) */
      .appShell #storefrontSection .settingsStoreSection{
        padding: 10px max(10px, env(safe-area-inset-left, 0px)) max(20px, calc(12px + env(safe-area-inset-bottom, 0px))) max(10px, env(safe-area-inset-right, 0px));
        gap: 12px;
      }

      .appShell #storefrontSection .tasksHead{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-bottom: 14px;
      }

      .appShell #storefrontSection .tasksFilters{
        width: 100%;
      }

      .appShell #storefrontSection .tasksFilters select,
      .appShell #storefrontSection .tasksFilters input{
        width: 100%;
        min-width: 0;
        min-height: 48px;
        font-size: 16px;
        border-radius: 12px;
      }

      .appShell #storefrontSection .tasksTitleWrap h2{
        font-size: clamp(17px, 4.2vw, 20px);
        line-height: 1.35;
      }

      .appShell #storefrontSection .tasksTitleWrap p{
        font-size: 13px;
        line-height: 1.55;
      }

      .appShell #storefrontSection .settingsStoreHero{
        padding: 12px;
        border-radius: 14px;
      }

      .appShell #storefrontSection .storefrontFeatureNav{
        gap: 10px;
      }

      .appShell #storefrontSection .storefrontFeatureBtn{
        min-height: 52px;
        padding: 14px 16px;
        border-radius: 16px;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.07);
        touch-action: manipulation;
      }

      .appShell #storefrontSection .storefrontNavDropdown{
        border-radius: 16px;
      }

      .appShell #storefrontSection .storefrontNavDropdownSummary{
        min-height: 52px;
        align-items: center;
        padding: 12px 14px;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.06);
        touch-action: manipulation;
      }

      .appShell #storefrontSection .storefrontNavDropdownBody{
        padding: 8px;
        border-radius: 0 0 14px 14px;
      }

      .appShell #storefrontSection .storefrontNavDropdownItem{
        min-height: 48px;
        padding: 14px;
        justify-content: center;
        border-radius: 14px;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.06);
        touch-action: manipulation;
      }

      .appShell #storefrontSection .storeProductTabStripWrap{
        margin: 0 0 12px;
        padding-inline: 2px;
      }

      .appShell #storefrontSection .storeProductTabStrip{
        gap: 10px;
        padding: 6px 4px 12px;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: max(8px, env(safe-area-inset-left, 0px));
        overscroll-behavior-x: contain;
      }

      .appShell #storefrontSection .storeProductTab{
        scroll-snap-align: start;
        flex: 0 0 auto;
        min-width: max(148px, 38vw);
        max-width: min(320px, 92vw);
        min-height: 48px;
        padding: 14px 18px;
        font-size: 14px;
        line-height: 1.35;
        border-radius: 14px;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
        touch-action: manipulation;
      }

      @media (prefers-reduced-motion: reduce){
        .appShell #storefrontSection .storeProductTabStrip{
          scroll-snap-type: none;
        }
      }

      .appShell #storefrontSection .storefrontPanel[data-store-panel="products"] .storeAdminPageTitle{
        margin: -12px -12px 12px -12px;
        padding: 14px 14px 16px;
      }

      .appShell #storefrontSection .storefrontPanel[data-store-panel="products"] .storeAdminPageTitle strong{
        font-size: clamp(16px, 4vw, 18px);
      }

      .appShell #storefrontSection .storefrontPanel[data-store-panel="groups"] .storeAdminPageTitle--static{
        margin: -12px -12px 12px -12px;
        padding: 14px 14px 16px;
      }

      .appShell #storefrontSection .storeAdminSectionCard{
        border-radius: 14px;
        margin-bottom: 10px;
      }

      .appShell #storefrontSection .storeAdminSectionBar{
        padding: 12px 14px;
        font-size: 15px;
      }

      .appShell #storefrontSection .storeAdminSectionBody{
        padding: 12px;
      }

      .appShell #storefrontSection .storeAdminHintBox{
        font-size: 14px;
        line-height: 1.6;
        padding: 12px 14px;
      }

      .appShell #storefrontSection .settingsStoreField > span{
        font-size: 13px;
      }

      .appShell #storefrontSection .settingsStoreField input,
      .appShell #storefrontSection .settingsStoreField select,
      .appShell #storefrontSection .settingsStoreField textarea{
        min-height: 48px;
        font-size: 16px;
        border-radius: 12px;
      }

      .appShell #storefrontSection .settingsStoreField textarea{
        min-height: 112px;
      }

      .appShell #storefrontSection .settingsStoreSourceSelect{
        min-height: 200px !important;
        font-size: 15px;
      }

      .appShell #storefrontSection .storeAdminFormActions{
        flex-direction: column;
        gap: 10px;
        margin-top: 4px;
      }

      .appShell #storefrontSection .storeAdminFormActions .btn{
        width: 100%;
        min-height: 50px;
      }

      .appShell #storefrontSection .settingsStoreToggle{
        min-height: 52px;
        padding: 14px;
      }

      .appShell #storefrontSection .settingsStoreToggle > span{
        font-size: 14px;
      }

      .appShell #storefrontSection .settingsStoreSourcePreview{
        font-size: 14px;
        line-height: 1.65;
      }

      .appShell #storefrontSection .settingsStoreListItem{
        padding: 14px;
        gap: 14px;
      }

      .appShell #storefrontSection .settingsStoreListTitle{
        font-size: 16px;
      }

      .appShell #storefrontSection .settingsStoreListMeta{
        font-size: 13px;
      }

      .appShell #storefrontSection .settingsStoreQuickActions .btn{
        min-height: 48px;
        font-size: 15px;
      }

      .appShell .settingsStoreHero{
        padding: 14px;
      }

      .appShell .settingsStoreQuickActions,
      .appShell .settingsStoreActions{
        flex-direction: column;
      }

      .appShell .settingsStoreQuickActions .btn,
      .appShell .settingsStoreActions .btn{
        width: 100%;
      }

      .appShell .settingsStoreListItem{
        flex-direction: column;
      }

      .appShell .settingsStoreListThumb{
        width: 100%;
        min-width: 0;
        height: 180px;
      }

      .appShell .settingsStoreListActions{
        width: 100%;
        justify-content: stretch;
      }

      .appShell .settingsStoreListActions .btn{
        width: 100%;
      }
    }

    /* Inventory panel refresh */
    .appShell #inventorySection .inventoryGrid{
      gap: 14px;
      align-items: start;
    }

    .appShell #inventorySection .inventoryFormCard,
    .appShell #inventorySection .inventoryListWrap{
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }

    .appShell #inventorySection .inventorySummary{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
      font-size: 0;
    }

    .appShell #inventorySection .inventoryPagination{
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #f8fafc;
      padding: 8px 10px;
    }

    .appShell #inventorySection .inventoryPaginationMeta{
      color: #475569;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }

    .appShell #inventorySection .inventoryPaginationBtn{
      min-height: 34px;
      padding: 0 12px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell #inventorySection .inventorySummaryChip{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #dbe4f1;
      background: #f8fbff;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      line-height: 1.4;
      color: #0f172a;
    }

    .appShell #inventorySection .inventorySummaryLabel{
      color: #64748b;
      font-weight: 700;
    }

    .appShell #inventorySection .inventorySummaryValue{
      color: #0f172a;
      font-weight: 800;
    }

    .appShell #inventorySection .inventoryListHead{
      display: grid;
      grid-template-columns: minmax(200px, 1.1fr) minmax(190px, 1fr) minmax(220px, 1.1fr) 130px;
      align-items: center;
      gap: 10px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #f1f5fb;
      color: #475569;
      font-size: 12px;
      font-weight: 800;
      padding: 10px 12px;
      margin-bottom: 10px;
    }

    .appShell #inventorySection .inventoryList{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .appShell #inventorySection .inventoryItem{
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      padding: 0;
      overflow: hidden;
    }

    .appShell #inventorySection .inventoryItemHead{
      margin: 0;
      padding: 12px 14px;
      display: grid;
      grid-template-columns: 58px minmax(200px, 1.1fr) minmax(220px, 1fr) auto;
      gap: 10px;
      align-items: center;
      border-bottom: 1px solid #eef2f7;
    }

    .appShell #inventorySection .inventoryImage{
      width: 58px;
      height: 58px;
      border-radius: 11px;
      border: 1px solid #dbe4f1;
      background: #f1f5f9;
    }

    .appShell #inventorySection .inventoryImage.placeholder{
      color: #64748b;
      font-size: 17px;
      font-weight: 800;
    }

    .appShell #inventorySection .inventoryItemMain{
      min-width: 0;
    }

    .appShell #inventorySection .inventoryName{
      margin: 0;
      font-size: 14px;
      line-height: 1.45;
      color: #0f172a;
      font-weight: 800;
    }

    .appShell #inventorySection .inventoryId{
      margin-top: 4px;
      font-size: 12px;
      color: #64748b;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .appShell #inventorySection .inventoryMetaGrid{
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(120px, 1fr));
      gap: 8px;
    }

    .appShell #inventorySection .inventoryMetaPill{
      min-width: 0;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 10px;
      padding: 7px 9px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .appShell #inventorySection .inventoryMetaLabel{
      color: #64748b;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.3;
    }

    .appShell #inventorySection .inventoryMetaValue{
      color: #0f172a;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .appShell #inventorySection .inventoryStockTag{
      min-width: 132px;
      min-height: 32px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 800;
      justify-self: end;
      white-space: nowrap;
    }

    .appShell #inventorySection .inventorySubTable{
      padding: 10px 14px 0;
    }

    .appShell #inventorySection .inventorySubTable + .inventorySubTable{
      padding-top: 8px;
    }

    .appShell #inventorySection .inventorySubTableTitle{
      color: #334155;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .appShell #inventorySection .inventoryCompanyPrices{
      margin-top: 0;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
      max-height: 240px;
      background: #ffffff;
    }

    .appShell #inventorySection .inventoryCompanyPriceRow{
      display: grid;
      grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.2fr);
      gap: 10px;
      align-items: center;
      padding: 9px 10px;
      border-bottom: 1px solid #f1f5f9;
    }

    .appShell #inventorySection .inventoryCompanyPriceRow:last-child{
      border-bottom: 0;
    }

    .appShell #inventorySection .inventoryCompanyPriceName{
      font-size: 12px;
      color: #0f172a;
      font-weight: 800;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    .appShell #inventorySection .inventoryCompanyPriceMeta{
      font-size: 12px;
      color: #475569;
      font-weight: 600;
      line-height: 1.5;
      overflow-wrap: anywhere;
      text-align: start;
    }

    .appShell #inventorySection .inventoryMeta.inventoryWarningInline{
      margin: 10px 14px 0;
      border: 1px solid #fde68a;
      background: #fffbeb;
      color: #92400e;
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }

    .appShell #inventorySection .inventoryMeta.inventoryMetaEmpty{
      margin: 10px 14px 0;
      border: 1px dashed #cbd5e1;
      border-radius: 10px;
      padding: 9px 10px;
      color: #64748b;
      background: #f8fafc;
      font-size: 12px;
      font-weight: 600;
    }

    .appShell #inventorySection .inventoryActions{
      margin: 12px 14px 14px;
      padding-top: 10px;
      border-top: 1px dashed #dbe4f1;
      justify-content: flex-end;
      gap: 8px;
    }

    .appShell #inventorySection .inventoryActions .btn{
      min-height: 34px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
      padding: 0 12px;
    }

    @media (max-width: 1080px){
      .appShell #inventorySection .inventoryGrid{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px){
      .appShell .ordersTablePagination{
        flex-wrap: wrap;
        justify-content: center;
      }

      .appShell .ordersTablePaginationMeta{
        width: 100%;
      }

      .appShell #inventorySection .inventorySummary{
        gap: 6px;
      }

      .appShell #inventorySection .inventorySummaryChip{
        width: 100%;
        justify-content: space-between;
      }

      .appShell #inventorySection .inventoryPagination{
        flex-wrap: wrap;
        justify-content: center;
      }

      .appShell #inventorySection .inventoryPaginationMeta{
        width: 100%;
      }

      .appShell #inventorySection .inventoryListHead{
        display: none;
      }

      .appShell #inventorySection .inventoryItemHead{
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: start;
      }

      .appShell #inventorySection .inventoryMetaGrid{
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
      }

      .appShell #inventorySection .inventoryStockTag{
        grid-column: 1 / -1;
        justify-self: start;
      }

      .appShell #inventorySection .inventoryCompanyPriceRow{
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .appShell #inventorySection .inventorySubTable{
        padding: 8px 10px 0;
      }

      .appShell #inventorySection .inventoryActions{
        margin: 10px 10px 10px;
      }
    }

    /* Large desktop tuning (27" and similar) */
    @media (min-width: 1700px){
      .appShell .topbar,
      .appShell .monthlyTicker,
      .appShell .viewDock,
      .appShell .container,
      .appShell .appSignature{
        max-width: min(94vw, 1860px) !important;
      }

      .appShell .topbar{
        padding: 14px 20px !important;
        gap: 10px;
      }

      .appShell .viewDock{
        padding-inline: 20px !important;
      }

      .appShell .searchWrap{
        flex: 1 1 820px;
      }

      .appShell .search{
        max-width: none;
      }

      .appShell .tasksGrid,
      .appShell .expensesGrid,
      .appShell .collectionsGrid,
      .appShell .inventoryGrid,
      .appShell .driveGrid,
      .appShell .hrGrid{
        grid-template-columns: minmax(340px, 430px) minmax(0, 1fr) !important;
        gap: 14px !important;
      }

      .appShell .ordersTable{
        min-width: 1180px;
        width: 100%;
        table-layout: fixed;
      }

      .appShell header{
        backdrop-filter: none;
      }

      .appShell .monthlyTickerTrack{
        animation-duration: 40s;
      }

      .appShell .card:hover,
      .appShell .taskCard:hover,
      .appShell .expenseItem:hover,
      .appShell .collectionItem:hover,
      .appShell .inventoryItem:hover,
      .appShell .driveItem:hover,
      .appShell .hrAttendanceItem:hover,
      .appShell .appNotifItem:hover{
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
      }
    }

    /* Legacy/low performance devices (ex: older iMac) */
    .appShell.lowPerfDevice{
      background: linear-gradient(180deg, #f3f5fb 0%, #eef2f7 100%) !important;
    }

    .appShell.lowPerfDevice,
    .appShell.lowPerfDevice *{
      scroll-behavior: auto !important;
    }

    .appShell.lowPerfDevice *,
    .appShell.lowPerfDevice *::before,
    .appShell.lowPerfDevice *::after{
      animation: none !important;
      transition-property: none !important;
      transition-duration: 0s !important;
      transition-delay: 0s !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    .appShell.lowPerfDevice header{
      backdrop-filter: none !important;
      background: #4f46e5 !important;
      box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2) !important;
    }

    .appShell.lowPerfDevice .monthlyTickerTrack{
      animation: none !important;
      transform: none !important;
    }

    .appShell.lowPerfDevice .btn,
    .appShell.lowPerfDevice .viewDockBtn,
    .appShell.lowPerfDevice .card,
    .appShell.lowPerfDevice .taskCard,
    .appShell.lowPerfDevice .expenseItem,
    .appShell.lowPerfDevice .collectionItem,
    .appShell.lowPerfDevice .inventoryItem,
    .appShell.lowPerfDevice .driveItem,
    .appShell.lowPerfDevice .hrAttendanceItem,
    .appShell.lowPerfDevice .appNotifItem{
      transition: none !important;
    }

    .appShell.lowPerfDevice .card:hover,
    .appShell.lowPerfDevice .taskCard:hover,
    .appShell.lowPerfDevice .expenseItem:hover,
    .appShell.lowPerfDevice .collectionItem:hover,
    .appShell.lowPerfDevice .inventoryItem:hover,
    .appShell.lowPerfDevice .driveItem:hover,
    .appShell.lowPerfDevice .hrAttendanceItem:hover,
    .appShell.lowPerfDevice .appNotifItem:hover{
      transform: none !important;
      box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1) !important;
    }

    .appShell.lowPerfDevice .tasksSection,
    .appShell.lowPerfDevice .expensesSection,
    .appShell.lowPerfDevice .collectionsSection,
    .appShell.lowPerfDevice .inventorySection,
    .appShell.lowPerfDevice .driveSection,
    .appShell.lowPerfDevice .hrSection,
    .appShell.lowPerfDevice .financeTabs,
    .appShell.lowPerfDevice .appNotificationsSection{
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1) !important;
    }

    @media (min-width: 1700px){
      .appShell.lowPerfDevice .topbar,
      .appShell.lowPerfDevice .monthlyTicker,
      .appShell.lowPerfDevice .viewDock,
      .appShell.lowPerfDevice .container,
      .appShell.lowPerfDevice .appSignature{
        max-width: min(95vw, 1760px) !important;
      }
    }

    /* Ticket modal: ultra compact blocks */
    .appShell #modalBackdrop .modalBody{
      gap: 10px !important;
      padding: 10px 12px 8px !important;
      max-height: calc(100dvh - 182px) !important;
    }

    .appShell #modalBackdrop .modalTicketField{
      padding: 10px !important;
      border-radius: 10px !important;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    }

    .appShell #modalBackdrop .fieldTitle{
      margin-bottom: 7px !important;
      padding-bottom: 6px !important;
      gap: 6px !important;
    }

    .appShell #modalBackdrop .fieldTitle strong{
      font-size: 14px !important;
      line-height: 1.2 !important;
    }

    .appShell #modalBackdrop .fieldTitle .hint{
      font-size: 11px !important;
      line-height: 1.25 !important;
    }

    .appShell #modalBackdrop .label{
      font-size: 11px !important;
      margin-bottom: 4px !important;
    }

    .appShell #modalBackdrop input,
    .appShell #modalBackdrop select,
    .appShell #modalBackdrop textarea{
      min-height: 38px !important;
      padding: 7px 9px !important;
      font-size: 13px !important;
      border-radius: 10px !important;
    }

    .appShell #modalBackdrop textarea{
      min-height: 74px !important;
    }

    .appShell #modalBackdrop .row{
      margin-top: 8px !important;
      gap: 8px !important;
    }

    .appShell #modalBackdrop .uploads{
      margin-top: 8px !important;
      padding: 7px !important;
    }

    .appShell #modalBackdrop .previewGrid{
      gap: 8px !important;
      margin-top: 8px !important;
    }

    .appShell #modalBackdrop .preview{
      width: 70px !important;
      height: 70px !important;
      border-radius: 10px !important;
    }

    .appShell #modalBackdrop #orderInventoryProductPreview{
      margin-top: 8px !important;
      padding: 6px 8px !important;
      font-size: 11px !important;
    }

    .appShell #modalBackdrop #orderSelectedProducts{
      min-height: 40px !important;
      padding: 6px !important;
      border-radius: 10px !important;
    }

    .appShell #modalBackdrop #orderCostSummaryWrap{
      margin-top: 8px !important;
      padding: 7px 9px !important;
      font-size: 12px !important;
    }

    .appShell #modalBackdrop .modalFoot{
      padding: 10px 12px !important;
      gap: 8px !important;
    }

    .appShell #modalBackdrop .modalFoot .smallNote{
      font-size: 11px !important;
      line-height: 1.5 !important;
    }

    @media (max-width: 820px){
      .appShell #modalBackdrop .modalBody{
        gap: 8px !important;
        padding: 8px 8px 6px !important;
        max-height: calc(100dvh - 150px) !important;
      }

      .appShell #modalBackdrop .modalTicketField{
        padding: 8px !important;
      }

      .appShell #modalBackdrop input,
      .appShell #modalBackdrop select,
      .appShell #modalBackdrop textarea{
        font-size: 16px !important;
        min-height: 36px !important;
        padding: 7px 8px !important;
      }

      .appShell #modalBackdrop textarea{
        min-height: 66px !important;
      }

      .appShell #modalBackdrop .modalFoot{
        padding: 8px !important;
      }
    }

    @media (max-width: 820px){
      .appShell header,
      .appShell.lowPerfDevice header{
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
      }
    }

    /* Monthly ticker: compact and placed below header */
    .appShell .monthlyTicker{
      display: flex !important;
      width: calc(100vw - 18px) !important;
      max-width: calc(100vw - 18px) !important;
      margin: 4px auto 8px !important;
      padding: 0 6px !important;
      gap: 3px !important;
      min-height: 26px !important;
      align-items: center !important;
      border: 1px solid rgba(148, 163, 184, 0.34) !important;
      border-radius: 9px !important;
      background: #f8fbff !important;
      box-sizing: border-box !important;
    }

    .appShell .monthlyTickerLabel{
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 10px !important;
      line-height: 1 !important;
      min-height: 18px !important;
      padding: 0 6px !important;
      border-radius: 999px !important;
    }

    .appShell .monthlyTickerViewport{
      display: flex !important;
      align-items: center !important;
      flex: 1 1 auto !important;
      width: auto !important;
      border-radius: 8px !important;
      padding: 0 4px !important;
      min-width: 0 !important;
      min-height: 20px !important;
    }

    .appShell .monthlyTickerRun{
      gap: 5px !important;
      padding-inline-end: 14px !important;
      align-items: center !important;
    }

    .appShell .monthlyTickerItem{
      display: inline-flex !important;
      align-items: center !important;
      font-size: 11px !important;
      line-height: 1 !important;
      min-height: 18px !important;
      padding: 0 5px !important;
      gap: 3px !important;
    }

    .appShell .monthlyTickerTrack{
      min-height: 0 !important;
      animation-duration: 28s !important;
    }

    .appShell .monthlyTickerCount{
      font-size: 10px !important;
      line-height: 1 !important;
    }

    .appShell .monthlyTickerTopBadge{
      display: inline-flex !important;
      align-items: center !important;
      min-height: 16px !important;
      padding: 0 4px !important;
      font-size: 9px !important;
      line-height: 1 !important;
      gap: 2px !important;
    }

    .appShell .monthlyTickerTopBadge .monthlyTickerCrown{
      font-size: 9px !important;
    }

    .appShell.lowPerfDevice .monthlyTickerTrack{
      animation: monthlyTickerMove 28s linear infinite !important;
      transform: translate3d(0, 0, 0) !important;
    }

    .appShell.lowPerfDevice .monthlyTickerTrack.static{
      animation: none !important;
      transform: none !important;
    }

    .appShell .monthlyTicker[hidden]{
      display: none !important;
    }

    @media (max-width: 820px){
      .appShell .monthlyTicker{
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 4px auto 6px !important;
        padding: 0 5px !important;
        gap: 3px !important;
        min-height: 24px !important;
      }

      .appShell .monthlyTickerLabel{
        font-size: 9px !important;
        line-height: 1 !important;
        padding: 0 5px !important;
        min-height: 17px !important;
      }

      .appShell .monthlyTickerViewport{
        flex: 1 1 auto !important;
        width: auto !important;
        padding: 0 3px !important;
        min-height: 18px !important;
      }

      .appShell .monthlyTickerItem{
        font-size: 10px !important;
        line-height: 1 !important;
        padding: 0 4px !important;
        min-height: 17px !important;
      }

      .appShell .monthlyTickerCount{
        font-size: 9px !important;
      }

      .appShell .monthlyTickerTopBadge{
        font-size: 8px !important;
        padding: 0 3px !important;
        min-height: 15px !important;
      }
    }

    .appShell .financeAdvancedSection{
      border-radius: var(--ui-radius-card);
      border: 1px solid var(--ui-border);
      background: #ffffff;
      box-shadow: var(--ui-shadow);
      padding: 18px;
      margin-bottom: 14px;
    }

    .appShell .financeHubGrid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }

    .appShell .financeHubCard{
      min-height: 138px;
      border-radius: 22px;
      border: 1px solid #d8e2f0;
      background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
      color: #0f172a;
      padding: 14px;
      text-align: right;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .appShell .financeHubCard:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
    }

    .appShell .financeHubCard.active{
      border-color: rgba(99, 102, 241, 0.42);
      background: linear-gradient(180deg, #eef2ff 0%, #ffffff 100%);
      box-shadow: 0 18px 34px rgba(79, 70, 229, 0.16);
    }

    .appShell .financeHubCardIcon{
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #e8eef7;
      color: #334155;
      font-size: 18px;
    }

    .appShell .financeHubCard strong{
      display: block;
      color: #0f172a;
      font-size: 16px;
      font-weight: 900;
      line-height: 1.2;
    }

    .appShell .financeHubCard span:last-child{
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }

    .appShell .financeAdvancedGrid{
      display: grid;
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
      gap: 16px;
    }

    .appShell .financeAdvancedFormCard,
    .appShell .financeAdvancedListCard{
      border-radius: 18px;
      border: 1px solid #dce3ed;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
      padding: 16px;
    }

    .appShell .financeAdvancedListCard{
      min-height: 100%;
    }

    .appShell .financeActionCard{
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }

    .appShell .financeActionBody{
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
      justify-content: center;
    }

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

    .appShell .financeCompactFields > div{
      min-width: 0;
    }

    .appShell .financeAdvancedFormCard input,
    .appShell .financeAdvancedFormCard textarea,
    .appShell .financeAdvancedFormCard select{
      width: 100%;
      border-radius: 12px;
      border: 1px solid #d7deea;
      background: #ffffff;
      color: #0f172a;
      padding: 11px 12px;
      font-size: 14px;
    }

    .appShell .financeAdvancedFormCard textarea{
      min-height: 98px;
      resize: vertical;
    }

    .appShell .financeAdvancedFormCard input:focus,
    .appShell .financeAdvancedFormCard textarea:focus,
    .appShell .financeAdvancedFormCard select:focus{
      outline: none;
      border-color: rgba(99, 102, 241, 0.55);
      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
    }

    .appShell .financeCheckboxRow{
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 10px 0 12px;
      color: #334155;
      font-size: 13px;
      font-weight: 700;
    }

    .appShell .financeCheckboxRow input{
      width: auto;
      min-width: 16px;
    }

    .appShell .financeFormActions{
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }

    .appShell .financeFormActions .btn{
      flex: 1 1 0;
      justify-content: center;
    }

    .appShell .financeSectionInlineStats{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .appShell .financeStatChip{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid #d5def5;
      background: #eef2ff;
      color: #4338ca;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 800;
    }

    .appShell .financeFundCards{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
    }

    .appShell .financeEntryList{
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .appShell .financePurchasesLayout{
      display: grid;
      grid-template-columns: repeat(6, 132px);
      gap: 10px;
      align-items: start;
      overflow-x: auto;
      overflow-y: visible;
      padding-bottom: 6px;
      scroll-snap-type: x proximity;
    }

    .appShell .financePurchasesLayout.hasExpandedCard{
      grid-template-columns: minmax(0, 1fr);
      overflow: visible;
    }

    .appShell .financePurchasesLayout.hasExpandedCard .financePurchaseMiniCard:not(.expanded){
      display: none;
    }

    .appShell .financePurchasesForms,
    .appShell .financePurchasesInsights{
      display: contents;
    }

    .appShell .financePurchaseMiniCard{
      border-radius: 20px;
      border: 1px solid #dbe4f2;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
      overflow: hidden;
      min-height: 132px;
      width: 132px;
      aspect-ratio: 1 / 1;
      transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
      scroll-snap-align: start;
    }

    .appShell .financePurchaseMiniCard:hover{
      border-color: #c7d6ee;
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
      transform: translateY(-1px);
    }

    .appShell .financePurchaseMiniCard.expanded{
      grid-column: 1 / -1;
      min-height: 0;
      width: 100%;
      aspect-ratio: auto;
      transform: none;
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.09);
    }

    .appShell .financePurchaseMiniToggle{
      width: 100%;
      min-height: 132px;
      border: 0;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
      text-align: right;
      cursor: pointer;
    }

    .appShell .financePurchaseMiniCard.expanded .financePurchaseMiniToggle{
      min-height: 0;
      padding-bottom: 14px;
    }

    .appShell .financePurchaseMiniTop{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .appShell .financePurchaseMiniBadge{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid #d5def5;
      background: #eef2ff;
      color: #4338ca;
      padding: 4px 8px;
      font-size: 10px;
      font-weight: 900;
    }

    .appShell .financePurchaseMiniArrow{
      width: 28px;
      height: 28px;
      flex: 0 0 auto;
      border-radius: 999px;
      border: 1px solid #dbe4f2;
      background: #ffffff;
      color: #334155;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
    }

    .appShell .financePurchaseMiniCard.expanded .financePurchaseMiniArrow{
      transform: rotate(45deg);
      border-color: #c7d2fe;
      background: #eef2ff;
      color: #4338ca;
    }

    .appShell .financePurchaseMiniTitle{
      color: #0f172a;
      font-size: 16px;
      font-weight: 900;
      line-height: 1.2;
    }

    .appShell .financePurchaseMiniHint{
      color: #64748b;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .appShell .financePurchaseMiniBody{
      display: none;
      padding: 16px;
      border-top: 1px solid #e2e8f0;
      background: rgba(255,255,255,0.82);
    }

    .appShell .financePurchaseMiniCard.expanded .financePurchaseMiniBody{
      display: block;
    }

    .appShell .financeSupplierCard{
      border-radius: 18px;
      border: 1px solid #dbe4f2;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
      padding: 16px;
    }

    .appShell .financeSupplierCardHead{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .appShell .financeSupplierCardTitleWrap{
      min-width: 0;
    }

    .appShell .financeSupplierCardTitle{
      color: #0f172a;
      font-size: 18px;
      font-weight: 900;
      line-height: 1.25;
    }

    .appShell .financeSupplierCardMeta{
      margin-top: 4px;
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.5;
    }

    .appShell .financeSupplierDebt{
      flex: 0 0 auto;
      min-width: 126px;
      text-align: center;
      border-radius: 14px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      padding: 10px 12px;
      font-size: 18px;
      font-weight: 900;
    }

    .appShell .financeSupplierDebt.isDue{
      border-color: #fecaca;
      background: #fef2f2;
      color: #b91c1c;
    }

    .appShell .financeSupplierDebt.isCredit{
      border-color: #bfdbfe;
      background: #eff6ff;
      color: #1d4ed8;
    }

    .appShell .financeSupplierStats{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .appShell .financeSupplierStats span{
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: #eef2ff;
      color: #4338ca;
      padding: 7px 11px;
      font-size: 12px;
      font-weight: 800;
    }

    .appShell .financeSupplierNote{
      margin-top: 12px;
      color: #475569;
      font-size: 13px;
      line-height: 1.6;
    }

    .appShell .financeSupplierActions{
      margin-top: 12px;
    }

    .appShell .financeSupplierTimelines{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .appShell .financeSupplierTimeline{
      border-radius: 14px;
      border: 1px solid #dbe4f2;
      background: #f8fafc;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .appShell .financeSupplierTimelineTitle{
      color: #0f172a;
      font-size: 13px;
      font-weight: 900;
    }

    .appShell .financeSupplierTimelineItem{
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding-bottom: 8px;
      border-bottom: 1px dashed #d7deea;
    }

    .appShell .financeSupplierTimelineItem:last-child{
      border-bottom: 0;
      padding-bottom: 0;
    }

    .appShell .financeSupplierTimelineItem strong{
      color: #1e293b;
      font-size: 13px;
      font-weight: 900;
    }

    .appShell .financeSupplierTimelineItem span,
    .appShell .financeSupplierTimelineItem small{
      color: #475569;
      line-height: 1.55;
    }

    .appShell .financeSupplierTimelineItem small{
      font-size: 12px;
    }

    .appShell .financeSupplierTimelineEmpty{
      color: #64748b;
      font-size: 12px;
      line-height: 1.6;
    }

    .appShell .financeAmountStack{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }

    .appShell .financeAmountStack strong{
      color: #0f172a;
      font-size: 15px;
      font-weight: 900;
      white-space: nowrap;
    }

    .appShell .financeFundCard{
      border-radius: 16px;
      border: 1px solid #dbe4f2;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
      overflow: hidden;
      min-height: 208px;
    }

    .appShell .financeFundCard.expanded{
      grid-column: span 2;
      min-height: 0;
    }

    .appShell .financeFundCardToggle{
      width: 100%;
      border: 0;
      background: transparent;
      padding: 16px;
      text-align: right;
      display: flex;
      flex-direction: column;
      gap: 8px;
      cursor: pointer;
    }

    .appShell .financeFundCardBody{
      padding: 0 16px 16px;
      display: none;
    }

    .appShell .financeFundCard.expanded .financeFundCardBody{
      display: block;
    }

    .appShell .financeFundCardHead{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .appShell .financeFundHeadMain{
      min-width: 0;
    }

    .appShell .financeFundTitle{
      color: #0f172a;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.25;
    }

    .appShell .financeFundMeta{
      margin-top: 4px;
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.5;
    }

    .appShell .financeFundBalance{
      flex: 0 0 auto;
      min-width: 132px;
      text-align: center;
      border-radius: 14px;
      border: 1px solid #bbf7d0;
      background: #f0fdf4;
      color: #166534;
      padding: 10px 12px;
      font-size: 18px;
      font-weight: 900;
    }

    .appShell .financeFundBalance.neg{
      border-color: #fecaca;
      background: #fef2f2;
      color: #b91c1c;
    }

    .appShell .financeFundFormula{
      color: #4338ca;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
    }

    .appShell .financeFundMiniMeta{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .appShell .financeFundMiniMeta span{
      border-radius: 999px;
      background: #eef2ff;
      color: #4338ca;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 800;
    }

    .appShell .financeFundBreakdown{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .appShell .financeFundBreakdown span{
      border-radius: 999px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #334155;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell .financeFundNote{
      margin-top: 10px;
      color: #475569;
      font-size: 13px;
      line-height: 1.6;
    }

    .appShell .financeFundActions{
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .appShell .financeFundActions .btn{
      flex: 1 1 0;
      justify-content: center;
    }

    .appShell .financeInvoiceSearchResults{
      display: none;
      margin-top: 10px;
      border-radius: 14px;
      border: 1px solid #dbe4f2;
      background: #ffffff;
      max-height: 240px;
      overflow: auto;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    }

    .appShell .financeInvoiceSearchItem{
      width: 100%;
      border: 0;
      border-bottom: 1px solid #edf2f7;
      background: transparent;
      padding: 12px 14px;
      text-align: right;
      display: flex;
      flex-direction: column;
      gap: 4px;
      color: #0f172a;
      cursor: pointer;
    }

    .appShell .financeInvoiceSearchItem:last-child{
      border-bottom: 0;
    }

    .appShell .financeInvoiceSearchItem strong{
      font-size: 14px;
      font-weight: 900;
    }

    .appShell .financeInvoiceSearchItem span,
    .appShell .financeInvoiceSearchEmpty{
      color: #64748b;
      font-size: 12px;
      line-height: 1.5;
    }

    .appShell .financeInvoiceSearchEmpty{
      padding: 12px 14px;
    }

    .appShell .financeInvoiceDraftList{
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    .appShell .financeInvoiceDraftItem{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-radius: 14px;
      border: 1px solid #dbe4f2;
      background: #f8fafc;
      padding: 10px 12px;
    }

    .appShell .financeInvoiceDraftMain{
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .appShell .financeInvoiceDraftMain strong{
      color: #0f172a;
      font-size: 14px;
      font-weight: 900;
    }

    .appShell .financeInvoiceDraftMain span,
    .appShell .financeInvoiceDraftEmpty{
      color: #64748b;
      font-size: 12px;
      line-height: 1.5;
    }

    .appShell .financeInvoiceDraftEmpty{
      border-radius: 14px;
      border: 1px dashed #cbd5e1;
      background: #f8fafc;
      padding: 12px;
    }

    .appShell .financeOrderPreview{
      margin-top: 10px;
      border-radius: 12px;
      border: 1px dashed #cbd5e1;
      background: #f8fafc;
      color: #475569;
      padding: 10px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.6;
    }

    .appShell .financeOrderPreview.isReady{
      border-color: #86efac;
      background: #f0fdf4;
      color: #166534;
    }

    .appShell .financeOrderPreview.isError{
      border-color: #fca5a5;
      background: #fef2f2;
      color: #991b1b;
    }

    .appShell .financeTxnItemAdvanced{
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
    }

    @media (max-width: 960px){
      .appShell .financeAdvancedGrid{
        grid-template-columns: 1fr;
      }

      .appShell .financePurchasesLayout{
        grid-template-columns: repeat(6, 126px);
      }

      .appShell .financeFundCard.expanded{
        grid-column: span 1;
      }
    }

    @media (max-width: 760px){
      .appShell .financeHubGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .appShell .financeHubCard{
        min-height: 118px;
        border-radius: 18px;
        padding: 12px;
      }

      .appShell .financeAdvancedSection{
        padding: 14px;
      }

      .appShell .financeCompactFields{
        grid-template-columns: 1fr;
      }

      .appShell .financeFundCards{
        grid-template-columns: 1fr;
      }

      .appShell .financePurchaseMiniCard{
        min-height: 118px;
        width: 118px;
        aspect-ratio: auto;
      }

      .appShell .financePurchaseMiniCard.expanded{
        grid-column: span 1;
        width: 100%;
      }

      .appShell .financePurchaseMiniToggle{
        min-height: 118px;
        padding: 10px;
      }

      .appShell .financePurchaseMiniTitle{
        font-size: 14px;
      }

      .appShell .financePurchaseMiniHint{
        font-size: 10px;
      }

      .appShell .financeFundCardHead{
        flex-direction: column;
      }

      .appShell .financeSupplierCardHead{
        flex-direction: column;
      }

      .appShell .financeSupplierTimelines{
        grid-template-columns: 1fr;
      }

      .appShell .financeFundBalance{
        width: 100%;
        min-width: 0;
      }

      .appShell .financeSupplierDebt{
        width: 100%;
        min-width: 0;
      }

      .appShell .financeFormActions,
      .appShell .financeFundActions{
        flex-direction: column;
      }

      .appShell .financeInvoiceDraftItem{
        flex-direction: column;
        align-items: stretch;
      }
    }

    /* Keep every modal above the sticky header */
    .appShell .modalBackdrop{
      z-index: 3200 !important;
    }

    .appShell #financeSalesInvoiceBackdrop .modal{
      max-height: calc(100dvh - 20px);
    }

    .appShell #financeSalesInvoiceBackdrop .modalBody{
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .appShell #financeSalesInvoiceFormCard{
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
    }

    .appShell .financeSalesInvoiceStickyTop{
      position: sticky;
      top: 0;
      z-index: 4;
      background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 100%);
      border-bottom: 1px solid #e2e8f0;
      margin: -2px -2px 0;
      padding: 2px 2px 12px;
    }

    .appShell .financeSalesInvoiceDraftSection{
      min-height: 0;
    }

    .appShell #financeSalesInvoiceOrdersList{
      max-height: min(34dvh, 320px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-left: 2px;
    }

    @media (max-width: 760px){
      .appShell #financeSalesInvoiceBackdrop .modal{
        max-height: calc(100dvh - 10px);
      }

      .appShell .financeSalesInvoiceStickyTop{
        padding-bottom: 10px;
      }

      .appShell #financeSalesInvoiceOrdersList{
        max-height: min(30dvh, 240px);
      }
    }

    /* Tasks workspace - Zoho inspired */
    .appShell #dailyTasksSection .tasksFiltersNative{
      width: 100%;
      align-items: center;
    }

    .appShell #dailyTasksSection #taskSearchInput{
      min-width: min(260px, 100%);
      flex: 1 1 260px;
    }

    .appShell #dailyTasksSection .taskListWrap{
      padding: 0 !important;
      overflow: hidden;
    }

    .appShell #dailyTasksSection .taskWorkspace{
      display: grid;
      grid-template-columns: minmax(420px, 46%) minmax(0, 1fr);
      min-height: 720px;
    }

    .appShell #dailyTasksSection .taskBoardPane{
      min-width: 0;
      border-inline-start: 1px solid #eef2f7;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .appShell #dailyTasksSection .taskBoardToolbar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 18px 14px;
      border-bottom: 1px solid #eef2f7;
      background: #ffffff;
    }

    .appShell #dailyTasksSection .taskBoardTitleWrap{
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .appShell #dailyTasksSection .taskBoardTitleWrap strong{
      font-size: 15px;
      color: #111827;
    }

    .appShell #dailyTasksSection .taskBoardTitleWrap .hint{
      font-size: 12px;
      color: #64748b;
    }

    .appShell #dailyTasksSection .taskBoardCount{
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f5f7fb;
      border: 1px solid #e2e8f0;
      color: #334155;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .appShell #dailyTasksSection .taskBoardHeader,
    .appShell #dailyTasksSection .taskBoardRow{
      display: grid;
      grid-template-columns: minmax(92px, 0.9fr) minmax(220px, 2fr) minmax(180px, 1.4fr) minmax(124px, 1fr) minmax(132px, 1fr);
      gap: 12px;
      align-items: center;
    }

    .appShell #dailyTasksSection .taskBoardHeader{
      padding: 12px 18px;
      background: #f8fafc;
      border-bottom: 1px solid #eaf0f6;
      color: #64748b;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.01em;
      position: sticky;
      top: 0;
      z-index: 2;
    }

    .appShell #dailyTasksSection .taskListZoho{
      display: flex;
      flex-direction: column;
      gap: 0;
      min-height: 0;
      overflow: auto;
      max-height: calc(100dvh - 280px);
      overscroll-behavior: contain;
    }

    .appShell #dailyTasksSection .taskBoardRow{
      appearance: none;
      border: 0;
      border-bottom: 1px solid #edf2f7;
      background: #ffffff;
      width: 100%;
      text-align: right;
      padding: 14px 18px;
      cursor: pointer;
      transition: background-color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
      position: relative;
    }

    .appShell #dailyTasksSection .taskBoardRow:hover{
      background: #f8fbff;
    }

    .appShell #dailyTasksSection .taskBoardRow.isActive{
      background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
      box-shadow: inset 3px 0 0 #3b82f6;
    }

    .appShell #dailyTasksSection .taskBoardCell{
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .appShell #dailyTasksSection .taskBoardTitleTop{
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 2px;
    }

    .appShell #dailyTasksSection .taskBoardKind,
    .appShell #dailyTasksSection .taskBoardHierarchy{
      min-height: 24px;
      padding: 0 9px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }

    .appShell #dailyTasksSection .taskBoardKind.isMain{
      background: #eef2ff;
      color: #4338ca;
      border: 1px solid rgba(99, 102, 241, 0.16);
    }

    .appShell #dailyTasksSection .taskBoardKind.isSubtask{
      background: #fff7ed;
      color: #c2410c;
      border: 1px solid rgba(249, 115, 22, 0.18);
    }

    .appShell #dailyTasksSection .taskBoardHierarchy{
      background: #f8fafc;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }

    .appShell #dailyTasksSection .taskBoardId{
      font-size: 13px;
      font-weight: 800;
      color: #0f172a;
      direction: ltr;
      text-align: left;
    }

    .appShell #dailyTasksSection .taskBoardName{
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.45;
      word-break: break-word;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskBoardSnippet{
      font-size: 12px;
      color: #64748b;
      line-height: 1.55;
      word-break: break-word;
      unicode-bidi: plaintext;
      text-align: start;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .appShell #dailyTasksSection .taskBoardMetaLine{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      font-size: 11px;
      color: #94a3b8;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskBoardProgressBar{
      width: min(240px, 100%);
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: #e2e8f0;
    }

    .appShell #dailyTasksSection .taskBoardProgressBar > span{
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #34d399 0%, #10b981 58%, #059669 100%);
    }

    .appShell #dailyTasksSection .taskBoardRow.isSubtask{
      background: linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
      box-shadow: inset 3px 0 0 #f97316;
    }

    .appShell #dailyTasksSection .taskBoardRow.isSubtask:hover{
      background: #fff7ed;
    }

    .appShell #dailyTasksSection .taskOwnerStack{
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .appShell #dailyTasksSection .taskOwnerMiniList{
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
    }

    .appShell #dailyTasksSection .taskOwnerMini,
    .appShell #dailyTasksSection .taskOwnerAvatar{
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
      color: #1d4ed8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      border: 1px solid rgba(59, 130, 246, 0.18);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
      margin-inline-start: -6px;
    }

    .appShell #dailyTasksSection .taskOwnerMini:first-child{
      margin-inline-start: 0;
    }

    .appShell #dailyTasksSection .taskOwnerMore{
      min-width: 28px;
      height: 28px;
      padding: 0 8px;
      border-radius: 999px;
      background: #e2e8f0;
      color: #334155;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      margin-inline-start: -6px;
      border: 1px solid #cbd5e1;
    }

    .appShell #dailyTasksSection .taskOwnerStackLabel{
      min-width: 0;
      font-size: 12px;
      color: #334155;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .appShell #dailyTasksSection .taskStatusGrid,
    .appShell #dailyTasksSection .taskStatusDetail{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .appShell #dailyTasksSection .taskStatusGrid.waiting,
    .appShell #dailyTasksSection .taskStatusDetail.waiting{
      background: #eef2f7;
      color: #475569;
      border-color: #d7e0eb;
    }

    .appShell #dailyTasksSection .taskStatusGrid.pending,
    .appShell #dailyTasksSection .taskStatusDetail.pending{
      background: #dbeafe;
      color: #1d4ed8;
      border-color: rgba(59, 130, 246, 0.24);
    }

    .appShell #dailyTasksSection .taskStatusGrid.completed,
    .appShell #dailyTasksSection .taskStatusDetail.completed{
      background: #dcfce7;
      color: #166534;
      border-color: rgba(34, 197, 94, 0.24);
    }

    .appShell #dailyTasksSection .taskBoardDate{
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
    }

    .appShell #dailyTasksSection .taskBoardDateMeta{
      font-size: 11px;
      color: #94a3b8;
    }

    .appShell #dailyTasksSection .taskDetailPane{
      min-width: 0;
      min-height: 0;
      background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
      padding: 18px;
      overflow: auto;
    }

    .appShell #dailyTasksSection .taskSubtasksTableWrapper{
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .appShell #dailyTasksSection .taskSubtasksTableHead{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-bottom: 12px;
      border-bottom: 2px solid #e2e8f0;
    }

    .appShell #dailyTasksSection .taskSubtasksTableHead strong{
      font-size: 16px;
      color: #0f172a;
      font-weight: 600;
    }

    .appShell #dailyTasksSection .taskSubtasksTableHead .hint{
      font-size: 12px;
      color: #94a3b8;
    }

    .appShell #dailyTasksSection .taskSubtasksTable{
      width: 100%;
      border-collapse: collapse;
      background: #ffffff;
      font-size: 13px;
    }

    .appShell #dailyTasksSection .taskSubtasksTable thead th{
      background: #f1f5f9;
      padding: 10px 12px;
      text-align: right;
      font-weight: 600;
      color: #475569;
      font-size: 12px;
      border-bottom: 1px solid #d1d5db;
    }

    .appShell #dailyTasksSection .taskSubtasksTable tbody tr{
      border-bottom: 1px solid #edf2f7;
    }

    .appShell #dailyTasksSection .taskSubtasksTable tbody tr:hover{
      background: #f8fbff;
    }

    .appShell #dailyTasksSection .taskDetailEmpty{
      min-height: 100%;
      border: 1px dashed #cbd5e1;
      border-radius: 18px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-align: center;
      padding: 28px;
      color: #64748b;
    }

    .appShell #dailyTasksSection .taskDetailEmpty strong{
      font-size: 18px;
      color: #0f172a;
    }

    .appShell #dailyTasksSection .taskDetailCard{
      border: 1px solid #e5edf6;
      border-radius: 20px;
      background: #ffffff;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
      overflow: hidden;
    }

    .appShell #dailyTasksSection .taskDetailHeader{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 24px 18px;
      border-bottom: 1px solid #eef2f7;
      background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    }

    .appShell #dailyTasksSection .taskDetailHeaderMain{
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }

    .appShell #dailyTasksSection .taskDetailRefRow{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .appShell #dailyTasksSection .taskDetailRef{
      min-height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #eff6ff;
      color: #1d4ed8;
      font-size: 12px;
      font-weight: 800;
      direction: ltr;
    }

    .appShell #dailyTasksSection .taskDetailDueChip{
      min-height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      color: #475569;
      border: 1px solid #e2e8f0;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskDetailTitle{
      margin: 0;
      font-size: 28px;
      line-height: 1.25;
      color: #0f172a;
      word-break: break-word;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskDetailMetaLine{
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      color: #64748b;
      font-size: 13px;
      line-height: 1.6;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskProgressCard{
      width: min(420px, 100%);
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px 14px;
      border: 1px solid #d8f4e5;
      border-radius: 16px;
      background: linear-gradient(180deg, #f7fffb 0%, #ecfdf5 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .appShell #dailyTasksSection .taskProgressHead{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .appShell #dailyTasksSection .taskProgressHead strong{
      font-size: 12px;
      font-weight: 800;
      color: #166534;
    }

    .appShell #dailyTasksSection .taskProgressHead span{
      font-size: 13px;
      font-weight: 900;
      color: #047857;
    }

    .appShell #dailyTasksSection .taskProgressBar{
      width: 100%;
      height: 10px;
      border-radius: 999px;
      overflow: hidden;
      background: #d1fae5;
    }

    .appShell #dailyTasksSection .taskProgressBar > span{
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #34d399 0%, #10b981 60%, #059669 100%);
    }

    .appShell #dailyTasksSection .taskDetailHeaderSide{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
    }

    .appShell #dailyTasksSection .taskDetailTabs{
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 18px;
      border-bottom: 1px solid #eef2f7;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      background: #ffffff;
    }

    .appShell #dailyTasksSection .taskDetailTab{
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      background: #f8fafc;
      color: #334155;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.18s ease;
    }

    .appShell #dailyTasksSection .taskDetailTab.active{
      background: #e0ecff;
      color: #1d4ed8;
      border-color: rgba(59, 130, 246, 0.28);
    }

    .appShell #dailyTasksSection .taskDetailBody{
      padding: 20px;
    }

    .appShell #dailyTasksSection .taskDetailSections{
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .appShell #dailyTasksSection .taskDetailSection{
      border: 1px solid #edf2f7;
      border-radius: 16px;
      background: #ffffff;
      padding: 16px;
    }

    .appShell #dailyTasksSection .taskDetailSectionHead{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .appShell #dailyTasksSection .taskDetailSectionHead strong{
      font-size: 16px;
      color: #0f172a;
    }

    .appShell #dailyTasksSection .taskDetailDescription{
      color: #334155;
      line-height: 1.8;
      font-size: 14px;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskDetailInfoGrid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .appShell #dailyTasksSection .taskDetailInfoItem{
      border: 1px solid #edf2f7;
      border-radius: 14px;
      background: #fbfdff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .appShell #dailyTasksSection .taskDetailInfoLabel{
      font-size: 12px;
      color: #64748b;
    }

    .appShell #dailyTasksSection .taskDetailInfoItem strong{
      font-size: 14px;
      color: #0f172a;
      line-height: 1.5;
      word-break: break-word;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskDetailStatusSelect{
      width: 100%;
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
      color: #334155;
      cursor: pointer;
      font-family: inherit;
      font-weight: 500;
    }

    .appShell #dailyTasksSection .taskDetailStatusSelect:hover{
      border-color: #9ca3af;
    }

    .appShell #dailyTasksSection .taskDetailStatusSelect:focus{
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

    .appShell #dailyTasksSection .taskCommentsFeed,
    .appShell #dailyTasksSection .taskTimeline{
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .appShell #dailyTasksSection .taskCommentEntry{
      border: 1px solid #edf2f7;
      border-radius: 14px;
      background: #fbfdff;
      padding: 14px;
    }

    .appShell #dailyTasksSection .taskCommentEntryHead{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .appShell #dailyTasksSection .taskCommentEntryKind{
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #eef2ff;
      color: #4338ca;
      font-size: 11px;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .taskCommentEntryKind.isDone{
      background: #dcfce7;
      color: #166534;
    }

    .appShell #dailyTasksSection .taskCommentEntryMeta{
      color: #64748b;
      font-size: 11px;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskCommentEntryBody{
      color: #334155;
      line-height: 1.7;
      font-size: 13px;
      word-break: break-word;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskCommentComposer{
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .appShell #dailyTasksSection .taskCommentComposer textarea{
      min-height: 150px;
      border-radius: 16px;
      border: 1px solid #dbe3f0;
      background: #ffffff;
      padding: 14px;
      line-height: 1.7;
      resize: vertical;
    }

    .appShell #dailyTasksSection .taskDetailActions{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .appShell #dailyTasksSection #taskParentHint{
      border: 1px solid rgba(59, 130, 246, 0.16);
      background: #eff6ff;
      color: #1d4ed8;
      border-radius: 12px;
      padding: 10px 12px;
      line-height: 1.6;
    }

    .appShell #dailyTasksSection .taskOwnerChipList{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .appShell #dailyTasksSection .taskOwnerChip{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 4px 12px 4px 6px;
      border-radius: 999px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #0f172a;
      font-size: 13px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskDetailPlaceholder{
      border: 1px dashed #cbd5e1;
      border-radius: 14px;
      background: #fbfdff;
      padding: 16px;
      color: #64748b;
      line-height: 1.7;
      font-size: 13px;
    }

    .appShell #dailyTasksSection .taskTimelineItem{
      display: grid;
      grid-template-columns: 16px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }

    .appShell #dailyTasksSection .taskTimelineMarker{
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: #94a3b8;
      margin-top: 6px;
      box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.14);
    }

    .appShell #dailyTasksSection .taskTimelineItem--created .taskTimelineMarker{
      background: #6366f1;
      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
    }

    .appShell #dailyTasksSection .taskTimelineItem--done .taskTimelineMarker,
    .appShell #dailyTasksSection .taskTimelineItem--completed .taskTimelineMarker{
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
    }

    .appShell #dailyTasksSection .taskTimelineItem--attachment .taskTimelineMarker{
      background: #0ea5e9;
      box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
    }

    .appShell #dailyTasksSection .taskTimelineContent{
      border: 1px solid #edf2f7;
      border-radius: 14px;
      background: #fbfdff;
      padding: 12px 14px;
    }

    .appShell #dailyTasksSection .taskTimelineTitle{
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 4px;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskTimelineMeta{
      font-size: 11px;
      color: #64748b;
      margin-bottom: 8px;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskTimelineText{
      color: #334155;
      line-height: 1.65;
      font-size: 13px;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskAttachmentList,
    .appShell #dailyTasksSection .taskSubtaskList{
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 14px;
    }

    .appShell #dailyTasksSection .taskAttachmentItem{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid #edf2f7;
      border-radius: 14px;
      background: #fbfdff;
      padding: 14px;
    }

    .appShell #dailyTasksSection .taskAttachmentMain{
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .appShell #dailyTasksSection .taskAttachmentName{
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      word-break: break-word;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskAttachmentOriginalName{
      font-size: 11px;
      color: #94a3b8;
      word-break: break-word;
      unicode-bidi: plaintext;
      text-align: start;
      font-style: italic;
    }

    .appShell #dailyTasksSection .taskAttachmentMeta{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      color: #64748b;
      font-size: 12px;
      line-height: 1.5;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskAttachmentActions{
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      flex: 0 0 auto;
    }

    .appShell #dailyTasksSection .taskAttachmentItem.imageAttachment{
      flex-direction: column;
      align-items: flex-start;
    }

    .appShell #dailyTasksSection .taskAttachmentImagePreview{
      width: 100%;
      max-height: 340px;
      border-radius: 10px;
      overflow: hidden;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .appShell #dailyTasksSection .taskAttachmentImagePreview img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }

    .appShell #dailyTasksSection .taskSubtaskRow{
      width: 100%;
      border: 1px solid #edf2f7;
      border-radius: 14px;
      background: #fbfdff;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      text-align: right;
      cursor: pointer;
      transition: transform 0.18s ease, background-color 0.18s ease;
    }

    .appShell #dailyTasksSection .taskSubtaskRow:hover{
      background: #f8fbff;
      transform: translateY(-1px);
    }

    .appShell #dailyTasksSection .taskSubtaskMain{
      display: flex;
      flex-direction: column;
      gap: 7px;
      min-width: 0;
    }

    .appShell #dailyTasksSection .taskSubtaskTop{
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .appShell #dailyTasksSection .taskSubtaskBadge,
    .appShell #dailyTasksSection .taskSubtaskRef{
      min-height: 24px;
      padding: 0 9px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }

    .appShell #dailyTasksSection .taskSubtaskBadge{
      background: #fff7ed;
      color: #c2410c;
      border: 1px solid rgba(249, 115, 22, 0.18);
    }

    .appShell #dailyTasksSection .taskSubtaskRef{
      background: #eff6ff;
      color: #1d4ed8;
      direction: ltr;
    }

    .appShell #dailyTasksSection .taskSubtaskMain strong{
      color: #0f172a;
      font-size: 14px;
      line-height: 1.5;
      word-break: break-word;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskSubtaskMeta{
      color: #64748b;
      font-size: 12px;
      line-height: 1.55;
      word-break: break-word;
      unicode-bidi: plaintext;
      text-align: start;
    }

    .appShell #dailyTasksSection .taskSubtaskProgress{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .appShell #dailyTasksSection .taskSubtaskProgressBar{
      width: min(180px, 100%);
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: #e2e8f0;
    }

    .appShell #dailyTasksSection .taskSubtaskProgressBar > span{
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #34d399 0%, #10b981 58%, #059669 100%);
    }

    .appShell #dailyTasksSection .taskSubtaskProgressText{
      color: #0f766e;
      font-size: 12px;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .taskSubtaskSide{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      flex: 0 0 auto;
    }

    .appShell #dailyTasksSection .taskSubtaskDue{
      color: #94a3b8;
      font-size: 11px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskDetailParentBar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      border: 1px solid #dbeafe;
      background: #f8fbff;
      border-radius: 14px;
      padding: 12px 14px;
      margin-bottom: 14px;
    }

    .appShell #dailyTasksSection .taskDetailParentLabel{
      color: #1d4ed8;
      font-size: 12px;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .subtaskDropdownContainer{
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #fafbfc;
      overflow: hidden;
    }

    .appShell #dailyTasksSection .subtaskDropdownBtn{
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      background: #ffffff;
      border: 0;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      color: #1e293b;
      transition: background-color 0.2s ease;
    }

    .appShell #dailyTasksSection .subtaskDropdownBtn:hover{
      background: #f8fafc;
    }

    .appShell #dailyTasksSection .subtaskDropdownIcon{
      display: inline-block;
      transition: transform 0.3s ease;
      font-size: 12px;
    }

    .appShell #dailyTasksSection .subtaskTableWrapper{
      border-top: 1px solid #e2e8f0;
      max-height: 600px;
      overflow-y: auto;
    }

    .appShell #dailyTasksSection .subtaskTable{
      width: 100%;
      border-collapse: collapse;
      background: #ffffff;
    }

    .appShell #dailyTasksSection .subtaskTable thead th{
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      padding: 10px 12px;
      text-align: right;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      font-weight: 600;
    }

    .appShell #dailyTasksSection .subtaskTable tbody tr{
      border-bottom: 1px solid #edf2f7;
    }

    .appShell #dailyTasksSection .subtaskTable tbody tr:last-child{
      border-bottom: 0;
    }

    .appShell #dailyTasksSection .subtaskTable tbody tr:hover{
      background: #f8fbff;
    }

    .appShell #dailyTasksSection .subtaskTable td{
      padding: 10px 12px;
      font-size: 13px;
      color: #334155;
      vertical-align: middle;
    }

    .appShell #dailyTasksSection .subtaskTableId{
      font-weight: 700;
      color: #1d4ed8;
    }

    .appShell #dailyTasksSection .subtaskTableTitle{
      font-weight: 500;
    }

    .appShell #dailyTasksSection .subtaskTableAssignees,
    .appShell #dailyTasksSection .subtaskTableDue{
      color: #64748b;
      font-size: 12px;
    }

    .appShell #dailyTasksSection .subtaskTableStatus{
      text-align: center;
    }

    .appShell #dailyTasksSection .subtaskTableProgress{
      text-align: center;
      color: #6366f1;
      font-weight: 600;
    }

    .appShell #dailyTasksSection .progressSmall{
      display: inline-block;
      padding: 2px 6px;
      background: #eef2ff;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #4f46e5;
    }

    .appShell #dailyTasksSection .subtaskTableAction{
      text-align: center;
    }

    .appShell #dailyTasksSection .subtaskTableAction .btn{
      padding: 5px 10px;
      font-size: 12px;
    }

    .appShell #dailyTasksSection .taskDetailSectionCount{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      height: 24px;
      background: #e0e7ff;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      color: #4f46e5;
    }

    @media (max-width: 1180px){
      .appShell #dailyTasksSection.composer-open .tasksGrid--daily{
        grid-template-columns: minmax(0, 1fr) !important;
      }

      .appShell #dailyTasksSection .taskWorkspace{
        grid-template-columns: 1fr;
        min-height: 0;
      }

      .appShell #dailyTasksSection .taskBoardPane{
        border-inline-start: 0;
        border-bottom: 1px solid #eef2f7;
      }

      .appShell #dailyTasksSection .taskListZoho{
        max-height: 420px;
      }

      .appShell #dailyTasksSection .taskDetailPane{
        padding: 14px;
      }
    }

    @media (max-width: 760px){
      .appShell #dailyTasksSection .tasksFiltersNative{
        gap: 8px;
      }

      .appShell #dailyTasksSection #taskSearchInput,
      .appShell #dailyTasksSection #taskStatusFilter,
      .appShell #dailyTasksSection #taskStructureFilter,
      .appShell #dailyTasksSection #taskDueFilter,
      .appShell #dailyTasksSection #taskDueToFilter,
      .appShell #dailyTasksSection #refreshTasksBtn{
        width: 100%;
        min-width: 0;
      }

      .appShell #dailyTasksSection .taskBoardHeader{
        display: none;
      }

      .appShell #dailyTasksSection .taskBoardRow{
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px;
      }

      .appShell #dailyTasksSection .taskBoardCell{
        gap: 6px;
      }

      .appShell #dailyTasksSection .taskBoardCell--id::before,
      .appShell #dailyTasksSection .taskBoardCell--owner::before,
      .appShell #dailyTasksSection .taskBoardCell--status::before,
      .appShell #dailyTasksSection .taskBoardCell--date::before{
        font-size: 11px;
        font-weight: 800;
        color: #94a3b8;
      }

      .appShell #dailyTasksSection .taskBoardCell--id::before{ content: "ID"; }
      .appShell #dailyTasksSection .taskBoardCell--owner::before{ content: "المكلّفون"; }
      .appShell #dailyTasksSection .taskBoardCell--status::before{ content: "الحالة"; }
      .appShell #dailyTasksSection .taskBoardCell--date::before{ content: "الاستحقاق"; }

      .appShell #dailyTasksSection .taskDetailHeader{
        padding: 16px;
      }

      .appShell #dailyTasksSection .taskDetailTitle{
        font-size: 22px;
      }

      .appShell #dailyTasksSection .taskDetailTabs{
        padding: 10px 12px;
      }

      .appShell #dailyTasksSection .taskDetailBody{
        padding: 14px;
      }

      .appShell #dailyTasksSection .taskDetailInfoGrid{
        grid-template-columns: 1fr;
      }

      .appShell #dailyTasksSection .taskCommentComposer textarea{
        min-height: 120px;
      }

      .appShell #dailyTasksSection .taskAttachmentItem,
      .appShell #dailyTasksSection .taskSubtaskRow{
        flex-direction: column;
        align-items: stretch;
      }

      .appShell #dailyTasksSection .taskAttachmentActions,
      .appShell #dailyTasksSection .taskSubtaskSide{
        justify-content: flex-start;
        align-items: flex-start;
      }
    }

    /* Full-width shell + floating create popups */
    .appShell .topbar,
    .appShell .monthlyTicker,
    .appShell .viewDock,
    .appShell .container,
    .appShell .appSignature{
      max-width: none !important;
      width: 100% !important;
      margin-inline: 0 !important;
    }

    .appShell .container{
      padding-inline: 24px !important;
    }

    .appShell .topbar,
    .appShell .monthlyTicker,
    .appShell .viewDock{
      padding-inline: 24px !important;
    }

    .appShell .appLayout{
      width: 100% !important;
      max-width: none !important;
    }

    .appShell .modalBodySingle{
      grid-template-columns: 1fr !important;
    }

    .appShell .modalComposerHost{
      width: min(860px, calc(100vw - 24px)) !important;
    }

    .appShell #taskComposerBackdrop .modalBody,
    .appShell #inventoryComposerBackdrop .modalBody{
      padding: 18px;
    }

    .appShell #taskComposerBackdrop .taskComposer,
    .appShell #inventoryComposerBackdrop .inventoryFormCard{
      display: block !important;
      background: transparent;
      border: 0;
      box-shadow: none;
      padding: 0;
      margin: 0;
      width: 100%;
      max-width: 100%;
    }

    .appShell #taskComposerBackdrop .taskComposerHead{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .appShell #taskComposerBackdrop .taskComposer .fieldTitle{
      margin-bottom: 0;
      border-bottom: 0;
      padding-bottom: 0;
    }

    .appShell #taskComposerBackdrop .taskComposer .fieldTitle strong{
      font-size: 15px;
      color: #0f172a;
    }

    .appShell #taskComposerBackdrop .taskComposer .hint{
      font-size: 12px;
      color: #64748b;
    }

    @media (max-width: 760px){
      .appShell .container{
        padding-inline: 12px !important;
      }

      .appShell .topbar,
      .appShell .monthlyTicker,
      .appShell .viewDock{
        padding-inline: 12px !important;
      }

      .appShell .modalComposerHost{
        width: min(100vw - 12px, 860px) !important;
      }

      .appShell #taskComposerBackdrop .modalBody,
      .appShell #inventoryComposerBackdrop .modalBody{
        padding: 12px;
      }
    }

    /* Task studio redesign */
    .appShell #dailyTasksSection{
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
    }

    .appShell #dailyTasksSection .taskStudioLayout{
      display: grid;
      grid-template-columns: minmax(270px, 310px) minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }

    .appShell #dailyTasksSection .taskStudioSidebar{
      position: sticky;
      top: 96px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .appShell #dailyTasksSection .taskStudioCreateBtn{
      min-height: 72px;
      border-radius: 22px;
      justify-content: space-between;
      padding-inline: 22px;
      font-size: 28px;
      font-weight: 800;
      box-shadow: 0 20px 36px rgba(79, 70, 229, 0.28);
    }

    .appShell #dailyTasksSection .taskStudioSidebarStats{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .appShell #dailyTasksSection .taskStudioSidebarStat,
    .appShell #dailyTasksSection .taskStudioSidebarNavWrap,
    .appShell #dailyTasksSection .taskStudioSidebarFeedCard{
      border: 1px solid #e4ebf6;
      border-radius: 26px;
      background: #ffffff;
      box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    }

    .appShell #dailyTasksSection .taskStudioSidebarStat{
      min-height: 122px;
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8px;
      text-align: center;
    }

    .appShell #dailyTasksSection .taskStudioSidebarStat strong{
      font-size: 38px;
      line-height: 1;
      color: #1e293b;
    }

    .appShell #dailyTasksSection .taskStudioSidebarStat span{
      font-size: 16px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskStudioSidebarStat--done{
      background: linear-gradient(180deg, #eff6ff 0%, #e0ecff 100%);
      border-color: rgba(59, 130, 246, 0.2);
    }

    .appShell #dailyTasksSection .taskStudioSidebarStat--done strong,
    .appShell #dailyTasksSection .taskStudioSidebarStat--done span{
      color: #2563eb;
    }

    .appShell #dailyTasksSection .taskStudioSidebarStat--active{
      background: linear-gradient(180deg, #f0fdf4 0%, #e7f8ee 100%);
      border-color: rgba(34, 197, 94, 0.2);
    }

    .appShell #dailyTasksSection .taskStudioSidebarStat--active strong,
    .appShell #dailyTasksSection .taskStudioSidebarStat--active span{
      color: #16a34a;
    }

    .appShell #dailyTasksSection .taskStudioSidebarNavWrap{
      padding: 20px;
    }

    .appShell #dailyTasksSection .taskStudioSidebarHeading{
      font-size: 17px;
      font-weight: 800;
      color: #334155;
      margin-bottom: 14px;
      text-align: center;
    }

    .appShell #dailyTasksSection .taskStudioSidebarNav{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .appShell #dailyTasksSection .taskStudioNavBtn{
      min-height: 58px;
      border: 1px solid transparent;
      border-radius: 18px;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 14px;
      color: #334155;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }

    .appShell #dailyTasksSection .taskStudioNavBtn:hover{
      background: #f8fbff;
      border-color: #dbe6f5;
      transform: translateX(-2px);
    }

    .appShell #dailyTasksSection .taskStudioNavBtn.active{
      background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
      color: #ffffff;
      box-shadow: 0 16px 28px rgba(79, 70, 229, 0.24);
    }

    .appShell #dailyTasksSection .taskStudioNavCount{
      min-width: 34px;
      height: 34px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(37, 99, 235, 0.12);
      color: #2563eb;
      font-size: 13px;
      font-weight: 900;
      flex: 0 0 auto;
    }

    .appShell #dailyTasksSection .taskStudioNavBtn.active .taskStudioNavCount{
      background: rgba(255, 255, 255, 0.2);
      color: #ffffff;
    }

    .appShell #dailyTasksSection .taskStudioSidebarFeedCard{
      width: 100%;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      text-align: right;
    }

    .appShell #dailyTasksSection .taskStudioSidebarFeedCard strong{
      font-size: 18px;
      color: #0f172a;
      line-height: 1.4;
    }

    .appShell #dailyTasksSection .taskStudioSidebarFeedCard span{
      color: #64748b;
      line-height: 1.7;
      font-size: 13px;
    }

    .appShell #dailyTasksSection .taskStudioSidebarFeedCard--interactive{
      border: 1px solid #e4ebf6;
      background: #ffffff;
      cursor: pointer;
    }

    .appShell #dailyTasksSection .taskStudioSidebarFeedBadge{
      align-self: flex-start;
      min-height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .taskStudioSidebarFeedBadge--waiting{
      background: #eef2f7;
      color: #475569;
    }

    .appShell #dailyTasksSection .taskStudioSidebarFeedBadge--pending{
      background: #dbeafe;
      color: #1d4ed8;
    }

    .appShell #dailyTasksSection .taskStudioSidebarFeedBadge--completed{
      background: #dcfce7;
      color: #166534;
    }

    .appShell #dailyTasksSection .taskStudioSidebarFeedMeta{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: #64748b;
      font-size: 12px;
    }

    .appShell #dailyTasksSection .taskStudioSidebarFeedOwners .taskOwnerStackLabel{
      display: none;
    }

    .appShell #dailyTasksSection .taskStudioMain{
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-width: 0;
    }

    .appShell #dailyTasksSection .taskStudioHero{
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      align-items: flex-start !important;
    }

    .appShell #dailyTasksSection .taskStudioTitleWrap h2{
      font-size: clamp(40px, 5vw, 72px);
      line-height: 0.95;
      margin: 0;
      color: #0f172a;
    }

    .appShell #dailyTasksSection .taskStudioTitleWrap p{
      margin-top: 10px;
      font-size: 24px;
      line-height: 1.4;
      color: #64748b;
      max-width: 760px;
    }

    .appShell #dailyTasksSection .taskStudioCollapseBtn{
      display: none;
    }

    .appShell #dailyTasksSection .taskStudioFilterCard{
      border: 1px solid #e4ebf6;
      border-radius: 28px;
      background: #ffffff;
      box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
      padding: 18px;
    }

    .appShell #dailyTasksSection .taskStudioFilters{
      gap: 12px;
      align-items: center;
    }

    .appShell #dailyTasksSection .taskStudioFilters select,
    .appShell #dailyTasksSection .taskStudioFilters input,
    .appShell #dailyTasksSection .taskStudioFilters button{
      min-height: 60px;
      border-radius: 20px;
      font-size: 17px;
      border-color: #e4ebf6;
      background: #f8fbff;
    }

    .appShell #dailyTasksSection .taskStudioFilters button{
      padding-inline: 18px;
      background: linear-gradient(135deg, #eef2ff 0%, #eff6ff 100%);
      color: #334155;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .taskStudioStats{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin-top: 0;
    }

    .appShell #dailyTasksSection .taskStatCard{
      min-height: 154px;
      padding: 22px;
      border: 0;
      border-radius: 28px;
      box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      gap: 10px;
    }

    .appShell #dailyTasksSection .taskStatCard--total{
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .appShell #dailyTasksSection .taskStatCard--waiting{
      background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    }

    .appShell #dailyTasksSection .taskStatCard--progress{
      background: linear-gradient(135deg, #ff7a00 0%, #f97316 100%);
    }

    .appShell #dailyTasksSection .taskStatCard--completed{
      background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
    }

    .appShell #dailyTasksSection .taskStatIcon{
      display: none !important;
    }

    .appShell #dailyTasksSection .taskStatLabel{
      width: auto;
      text-align: right;
      color: rgba(255, 255, 255, 0.82);
      font-size: 18px;
      line-height: 1.2;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskStatValue{
      width: auto;
      text-align: right;
      color: #ffffff;
      font-size: 52px;
      line-height: 1;
      font-weight: 900;
    }

    .appShell #dailyTasksSection .taskStudioStageFilters{
      margin-top: 0;
      padding: 12px;
      border-radius: 24px;
      background: #ffffff;
      border: 1px solid #e4ebf6;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
      justify-content: flex-start;
    }

    .appShell #dailyTasksSection .taskStageChip{
      min-height: 48px;
      padding: 0 18px;
      font-size: 15px;
      font-weight: 800;
      border-radius: 16px;
      background: #f4f7fb;
      color: #475569;
      border: 1px solid #e2e8f0;
    }

    .appShell #dailyTasksSection .taskStageChip.active{
      box-shadow: none;
      background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
    }

    .appShell #dailyTasksSection .taskStudioBody{
      display: block !important;
      margin-top: 0;
      min-width: 0;
    }

    .appShell #dailyTasksSection .taskScene{
      min-width: 0;
    }

    .appShell #dailyTasksSection .taskScene[hidden]{
      display: none !important;
    }

    .appShell #dailyTasksSection .tasksWarning,
    .appShell #dailyTasksSection .tasksEmpty,
    .appShell #dailyTasksSection .taskStudioEmptyCard{
      border: 1px dashed #cdd9ea;
      border-radius: 28px;
      background: #ffffff;
      padding: 28px;
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
      color: #64748b;
      text-align: center;
      line-height: 1.8;
    }

    .appShell #dailyTasksSection .taskStudioEmptyCard strong,
    .appShell #dailyTasksSection .tasksEmpty strong{
      display: block;
      margin-bottom: 8px;
      font-size: 20px;
      color: #0f172a;
    }

    .appShell #dailyTasksSection .taskProjectTableWrapper{
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #ffffff;
      overflow-x: auto;
    }

    .appShell #dailyTasksSection .taskProjectTable{
      width: 100%;
      border-collapse: collapse;
      background: #ffffff;
    }

    .appShell #dailyTasksSection .taskProjectTable thead th{
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      padding: 12px 14px;
      text-align: right;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
    }

    .appShell #dailyTasksSection .taskProjectTable tbody tr{
      border-bottom: 1px solid #edf2f7;
    }

    .appShell #dailyTasksSection .taskProjectTable tbody tr:last-child{
      border-bottom: 0;
    }

    .appShell #dailyTasksSection .taskProjectTable tbody tr:hover{
      background: #f8fbff;
    }

    .appShell #dailyTasksSection .taskProjectTable td{
      padding: 12px 14px;
      font-size: 13px;
      color: #334155;
      vertical-align: middle;
    }

    .appShell #dailyTasksSection .taskProjectTableTitle{
      font-weight: 500;
      max-width: 200px;
    }

    .appShell #dailyTasksSection .taskProjectTableTitleBtn{
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      color: #0f172a;
      font-weight: 600;
      text-align: right;
      width: 100%;
    }

    .appShell #dailyTasksSection .taskProjectTableTitleBtn:hover{
      color: #1d4ed8;
    }

    .appShell #dailyTasksSection .taskProjectTableCompany,
    .appShell #dailyTasksSection .taskProjectTableDue{
      color: #64748b;
      font-size: 12px;
    }

    .appShell #dailyTasksSection .taskProjectTableStatus{
      text-align: center;
    }

    .appShell #dailyTasksSection .taskProjectTableProgress{
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      color: #6366f1;
    }

    .appShell #dailyTasksSection .progressBarSmall{
      width: 80px;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      overflow: hidden;
    }

    .appShell #dailyTasksSection .progressBarFill{
      height: 100%;
      background: linear-gradient(90deg, #6366f1, #8b5cf6);
      width: 0%;
      transition: width 0.3s ease;
    }

    .appShell #dailyTasksSection .taskProjectTableOwners{
      display: flex;
      gap: 6px;
    }

    .appShell #dailyTasksSection .taskProjectTableSubtasks{
      text-align: center;
    }

    .appShell #dailyTasksSection .projectSubtaskTable{
      width: 100%;
      border-collapse: collapse;
      background: #fafbfc;
      font-size: 12px;
      margin-top: 0;
    }

    .appShell #dailyTasksSection .projectSubtaskTable tbody tr{
      border-bottom: 1px solid #e2e8f0;
    }

    .appShell #dailyTasksSection .projectSubtaskTable tbody tr:last-child{
      border-bottom: 0;
    }

    .appShell #dailyTasksSection .projectSubtaskTable tbody tr:hover{
      background: #f1f5ff;
    }

    .appShell #dailyTasksSection .projectSubtaskTable td{
      padding: 8px 10px;
      border: 0;
    }

    .appShell #dailyTasksSection .subtaskId{
      font-weight: 700;
      color: #1d4ed8;
    }

    .appShell #dailyTasksSection .projectSubtaskTable .subtaskTitle{
      font-weight: 500;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .appShell #dailyTasksSection .projectSubtaskTable .subtaskProgress{
      color: #6366f1;
      font-weight: 600;
    }

    .appShell #dailyTasksSection .projectSubtaskTable .btn{
      padding: 4px 8px;
      font-size: 11px;
    }

    .appShell #dailyTasksSection .taskStatusSelect,
    .appShell #dailyTasksSection .taskStatusSelect.small{
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 12px;
      color: #334155;
      cursor: pointer;
      font-family: inherit;
    }

    .appShell #dailyTasksSection .taskStatusSelect.small{
      padding: 2px 6px;
      font-size: 11px;
    }

    .appShell #dailyTasksSection .taskStatusSelect.stageStatus{
      transition: all 0.3s ease;
    }

    .appShell #dailyTasksSection .taskStatusSelect.stageStatus.stage-waiting{
      border-color: #f97316;
      background: #fef3c7;
      color: #92400e;
    }

    .appShell #dailyTasksSection .taskStatusSelect.stageStatus.stage-pending{
      border-color: #3b82f6;
      background: #dbeafe;
      color: #1e40af;
    }

    .appShell #dailyTasksSection .taskStatusSelect.stageStatus.stage-completed{
      border-color: #22c55e;
      background: #dcfce7;
      color: #15803d;
    }

    .appShell #dailyTasksSection .taskStatusSelect.stageStatus.stage-rejected{
      border-color: #ef4444;
      background: #fee2e2;
      color: #991b1b;
    }

    .appShell #dailyTasksSection .subtaskTitleBtn,
    .appShell #dailyTasksSection .subtaskTitleBtn.small{
      background: none;
      border: none;
      color: #1d4ed8;
      font-weight: 500;
      cursor: pointer;
      padding: 0;
      text-align: right;
      font-size: 13px;
    }

    .appShell #dailyTasksSection .subtaskTitleBtn:hover{
      color: #1e40af;
      text-decoration: underline;
    }

    .appShell #dailyTasksSection .subtaskTitleBtn.small{
      font-size: 11px;
    }

    .appShell #dailyTasksSection .nestedSubtaskDropdown{
      display: flex;
      align-items: center;
    }

    .appShell #dailyTasksSection .nestedBtn{
      background: #f1f5ff;
      border: 1px solid #c7d2fe;
      color: #4f46e5;
      padding: 2px 6px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .appShell #dailyTasksSection .nestedBtn:hover{
      background: #eef2ff;
    }

    .appShell #dailyTasksSection .nestedIcon{
      display: inline-block;
      transition: transform 0.3s ease;
      font-size: 10px;
    }

    .appShell #dailyTasksSection .nestedSubtaskRow{
      display: none;
    }

    .appShell #dailyTasksSection .nestedSubtaskTable{
      width: 100%;
      border-collapse: collapse;
      background: #f1f5ff;
      font-size: 11px;
      margin: 0;
      padding: 8px;
    }

    .appShell #dailyTasksSection .nestedSubtaskTable tbody tr{
      border-bottom: 1px solid #d1d5db;
    }

    .appShell #dailyTasksSection .nestedSubtaskTable tbody tr:last-child{
      border-bottom: 0;
    }

    .appShell #dailyTasksSection .nestedSubtaskTable tbody tr:hover{
      background: #eef2ff;
    }

    .appShell #dailyTasksSection .nestedSubtaskTable td{
      padding: 6px 8px;
      border: 0;
    }

    .appShell #dailyTasksSection .taskProjectGrid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .appShell #dailyTasksSection .taskProjectCard{
      border: 1px solid #e4ebf6;
      border-radius: 28px;
      background: #ffffff;
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      text-align: right;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .appShell #dailyTasksSection .taskProjectCard:hover{
      transform: translateY(-3px);
      box-shadow: 0 24px 42px rgba(15, 23, 42, 0.12);
    }

    .appShell #dailyTasksSection .taskProjectCardTop{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .appShell #dailyTasksSection .taskProjectDot{
      width: 14px;
      height: 14px;
      border-radius: 999px;
      background: #94a3b8;
      flex: 0 0 auto;
    }

    .appShell #dailyTasksSection .taskProjectDot--waiting{ background: #64748b; }
    .appShell #dailyTasksSection .taskProjectDot--pending{ background: #f59e0b; }
    .appShell #dailyTasksSection .taskProjectDot--completed{ background: #22c55e; }

    .appShell #dailyTasksSection .taskProjectCompany{
      color: #64748b;
      font-size: 13px;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .taskProjectCard h3{
      margin: 0;
      color: #0f172a;
      font-size: 24px;
      line-height: 1.2;
      word-break: break-word;
    }

    .appShell #dailyTasksSection .taskProjectCard p{
      margin: 0;
      color: #64748b;
      font-size: 15px;
      line-height: 1.75;
      min-height: 84px;
    }

    .appShell #dailyTasksSection .taskProjectProgressHead,
    .appShell #dailyTasksSection .taskProjectMetrics,
    .appShell #dailyTasksSection .taskProjectFoot{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .appShell #dailyTasksSection .taskProjectProgressHead span{
      color: #475569;
      font-size: 14px;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .taskProjectProgressHead strong{
      color: #2563eb;
      font-size: 22px;
    }

    .appShell #dailyTasksSection .taskProjectProgressBar{
      width: 100%;
      height: 10px;
      border-radius: 999px;
      overflow: hidden;
      background: #e2e8f0;
    }

    .appShell #dailyTasksSection .taskProjectProgressBar > span{
      display: block;
      height: 100%;
      background: linear-gradient(90deg, #4f46e5 0%, #2563eb 100%);
      border-radius: inherit;
    }

    .appShell #dailyTasksSection .taskProjectMetrics span{
      min-height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f8fbff;
      border: 1px solid #e4ebf6;
      color: #475569;
      font-size: 13px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskProjectMetrics strong{
      color: #2563eb;
      margin-inline-start: 4px;
    }

    .appShell #dailyTasksSection .taskProjectBudget{
      border: 1px solid #bbf7d0;
      border-radius: 20px;
      padding: 16px 18px;
      background: linear-gradient(180deg, #f0fdf4 0%, #e7f8ee 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .appShell #dailyTasksSection .taskProjectBudget span{
      color: #166534;
      font-size: 14px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskProjectBudget strong{
      color: #15803d;
      font-size: 24px;
      line-height: 1;
    }

    .appShell #dailyTasksSection .taskProjectFoot{
      padding-top: 8px;
      border-top: 1px solid #eef2f7;
    }

    .appShell #dailyTasksSection .taskProjectFoot .taskOwnerStack{
      width: 100%;
      justify-content: space-between;
    }

    .appShell #dailyTasksSection .taskListWrap{
      padding: 0 !important;
      background: transparent !important;
      overflow: visible !important;
    }

    .appShell #dailyTasksSection .taskWorkspace{
      display: grid;
      grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
      gap: 18px;
      min-height: 760px;
    }

    .appShell #dailyTasksSection .taskBoardPane,
    .appShell #dailyTasksSection .taskDetailPane{
      border: 1px solid #e4ebf6;
      border-radius: 28px;
      background: #ffffff;
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
      overflow: hidden;
    }

    .appShell #dailyTasksSection .taskBoardPane{
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .appShell #dailyTasksSection .taskBoardToolbar{
      padding: 20px 20px 16px;
      background: #ffffff;
      border-bottom: 1px solid #eef2f7;
    }

    .appShell #dailyTasksSection .taskBoardTitleWrap strong{
      font-size: 20px;
      color: #0f172a;
    }

    .appShell #dailyTasksSection .taskBoardTitleWrap .hint{
      font-size: 13px;
      color: #64748b;
    }

    .appShell #dailyTasksSection .taskBoardCount{
      min-height: 40px;
      padding: 0 14px;
      border-radius: 999px;
      background: #eef4ff;
      border-color: rgba(59, 130, 246, 0.16);
      color: #2563eb;
      font-size: 13px;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .taskBoardHeader{
      display: none !important;
    }

    .appShell #dailyTasksSection .taskListZoho{
      padding: 18px;
      gap: 14px;
      max-height: calc(100dvh - 250px);
    }

    .appShell #dailyTasksSection .taskBoardRow{
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 18px 18px 18px 20px;
      border: 1px solid #e7edf7;
      border-radius: 24px;
      background: #ffffff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }

    .appShell #dailyTasksSection .taskBoardRow.isActive{
      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
      border-color: rgba(37, 99, 235, 0.24);
      box-shadow: 0 18px 34px rgba(37, 99, 235, 0.12);
    }

    .appShell #dailyTasksSection .taskBoardRow.isSubtask{
      background: linear-gradient(180deg, #fffaf4 0%, #ffffff 100%);
      border-color: rgba(249, 115, 22, 0.16);
      box-shadow: 0 8px 20px rgba(249, 115, 22, 0.06);
    }

    .appShell #dailyTasksSection .taskBoardRowAccent{
      position: absolute;
      inset-inline-end: 0;
      top: 14px;
      bottom: 14px;
      width: 6px;
      border-radius: 999px;
      background: #94a3b8;
    }

    .appShell #dailyTasksSection .taskBoardRowAccent--waiting{ background: #64748b; }
    .appShell #dailyTasksSection .taskBoardRowAccent--pending{ background: #f59e0b; }
    .appShell #dailyTasksSection .taskBoardRowAccent--completed{ background: #22c55e; }

    .appShell #dailyTasksSection .taskBoardCardTop,
    .appShell #dailyTasksSection .taskBoardCardFoot,
    .appShell #dailyTasksSection .taskBoardProgressHead{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .appShell #dailyTasksSection .taskBoardRefWrap{
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .appShell #dailyTasksSection .taskBoardId{
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: #eef2ff;
      color: #4338ca;
      font-size: 12px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .appShell #dailyTasksSection .taskBoardName{
      font-size: 22px;
      line-height: 1.3;
      color: #0f172a;
      font-weight: 900;
    }

    .appShell #dailyTasksSection .taskBoardMetaLine{
      gap: 8px;
    }

    .appShell #dailyTasksSection .taskBoardMetaLine span,
    .appShell #dailyTasksSection .taskBoardCardMeta span{
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f8fbff;
      border: 1px solid #e4ebf6;
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskBoardSnippet{
      font-size: 14px;
      line-height: 1.75;
      color: #475569;
      -webkit-line-clamp: 3;
    }

    .appShell #dailyTasksSection .taskBoardProgressWrap{
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .appShell #dailyTasksSection .taskBoardProgressHead span{
      color: #64748b;
      font-size: 12px;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .taskBoardProgressHead strong{
      color: #2563eb;
      font-size: 15px;
    }

    .appShell #dailyTasksSection .taskBoardProgressBar{
      width: 100%;
      height: 8px;
      background: #e2e8f0;
    }

    .appShell #dailyTasksSection .taskBoardCardFoot{
      padding-top: 6px;
      border-top: 1px solid #eef2f7;
      align-items: flex-end;
    }

    .appShell #dailyTasksSection .taskBoardCardMeta{
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .appShell #dailyTasksSection .taskDetailPane{
      padding: 18px;
      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
      max-height: calc(100dvh - 220px);
      overflow: auto;
    }

    .appShell #dailyTasksSection .taskKanbanBoard{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      align-items: start;
    }

    .appShell #dailyTasksSection .taskKanbanColumn{
      border: 1px solid #e4ebf6;
      border-radius: 28px;
      background: #ffffff;
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
      overflow: hidden;
    }

    .appShell #dailyTasksSection .taskKanbanColumnHead{
      min-height: 76px;
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #ffffff;
      font-size: 20px;
      font-weight: 900;
    }

    .appShell #dailyTasksSection .taskKanbanColumnHead span{
      min-width: 38px;
      height: 38px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.18);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .appShell #dailyTasksSection .taskKanbanColumn--waiting .taskKanbanColumnHead{
      background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    }

    .appShell #dailyTasksSection .taskKanbanColumn--pending .taskKanbanColumnHead{
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .appShell #dailyTasksSection .taskKanbanColumn--completed .taskKanbanColumnHead{
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    }

    .appShell #dailyTasksSection .taskKanbanList{
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 18px;
      min-height: 240px;
    }

    .appShell #dailyTasksSection .taskKanbanCard{
      border: 1px solid #e4ebf6;
      border-radius: 22px;
      background: #ffffff;
      padding: 16px;
      text-align: right;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .appShell #dailyTasksSection .taskKanbanCard:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 26px rgba(15, 23, 42, 0.08);
    }

    .appShell #dailyTasksSection .taskKanbanCardTop,
    .appShell #dailyTasksSection .taskKanbanMeta{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .appShell #dailyTasksSection .taskKanbanKind{
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
    }

    .appShell #dailyTasksSection .taskKanbanKind.isMain{
      background: #eef2ff;
      color: #4338ca;
    }

    .appShell #dailyTasksSection .taskKanbanKind.isSubtask{
      background: #fff7ed;
      color: #c2410c;
    }

    .appShell #dailyTasksSection .taskKanbanDue,
    .appShell #dailyTasksSection .taskKanbanCompany,
    .appShell #dailyTasksSection .taskKanbanMeta{
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskKanbanCard strong{
      color: #0f172a;
      font-size: 18px;
      line-height: 1.4;
    }

    .appShell #dailyTasksSection .taskKanbanProgress{
      width: 100%;
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: #e2e8f0;
    }

    .appShell #dailyTasksSection .taskKanbanProgress > span{
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #4f46e5 0%, #2563eb 100%);
    }

    .appShell #dailyTasksSection .taskKanbanEmpty,
    .appShell #dailyTasksSection .taskStudioEmptyInline{
      border: 1px dashed #d7e2f0;
      border-radius: 18px;
      padding: 18px;
      color: #64748b;
      text-align: center;
      line-height: 1.7;
    }

    .appShell #dailyTasksSection .taskTeamGrid,
    .appShell #dailyTasksSection .taskSettingsGrid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .appShell #dailyTasksSection .taskTeamCard,
    .appShell #dailyTasksSection .taskReportCard,
    .appShell #dailyTasksSection .taskReportPanel,
    .appShell #dailyTasksSection .taskSettingsCard{
      border: 1px solid #e4ebf6;
      border-radius: 26px;
      background: #ffffff;
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
      padding: 20px;
    }

    .appShell #dailyTasksSection .taskTeamCardTop{
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .appShell #dailyTasksSection .taskTeamAvatar{
      width: 52px;
      height: 52px;
      border-radius: 999px;
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
      color: #1d4ed8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 900;
    }

    .appShell #dailyTasksSection .taskTeamCardTop strong,
    .appShell #dailyTasksSection .taskSettingsCard strong,
    .appShell #dailyTasksSection .taskReportPanelHead strong{
      display: block;
      font-size: 20px;
      color: #0f172a;
      margin-bottom: 4px;
    }

    .appShell #dailyTasksSection .taskTeamCardTop span,
    .appShell #dailyTasksSection .taskSettingsCard p{
      color: #64748b;
      font-size: 14px;
      line-height: 1.7;
      margin: 0;
    }

    .appShell #dailyTasksSection .taskTeamStats{
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .appShell #dailyTasksSection .taskTeamStats span{
      min-height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f8fbff;
      border: 1px solid #e4ebf6;
      color: #475569;
      font-size: 13px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskTeamList{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .appShell #dailyTasksSection .taskTeamListItem{
      border: 1px solid #edf2f7;
      border-radius: 16px;
      background: #fbfdff;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #334155;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .appShell #dailyTasksSection .taskReportCards{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 18px;
    }

    .appShell #dailyTasksSection .taskReportCard{
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 152px;
      justify-content: center;
    }

    .appShell #dailyTasksSection .taskReportCard span,
    .appShell #dailyTasksSection .taskReportCard small{
      color: #64748b;
      font-size: 14px;
      line-height: 1.6;
    }

    .appShell #dailyTasksSection .taskReportCard strong{
      color: #0f172a;
      font-size: 28px;
      line-height: 1.25;
    }

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

    .appShell #dailyTasksSection .taskReportList{
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 14px;
    }

    .appShell #dailyTasksSection .taskReportListItem{
      border: 1px solid #edf2f7;
      border-radius: 16px;
      background: #fbfdff;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #334155;
      font-size: 14px;
      font-weight: 700;
    }

    .appShell #dailyTasksSection .taskSettingsCard{
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .appShell #dailyTasksSection .taskSettingsCard .btn{
      align-self: flex-start;
    }

    @media (max-width: 1320px){
      .appShell #dailyTasksSection .taskProjectGrid,
      .appShell #dailyTasksSection .taskTeamGrid,
      .appShell #dailyTasksSection .taskSettingsGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .appShell #dailyTasksSection .taskReportCards{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 1160px){
      .appShell #dailyTasksSection .taskStudioLayout{
        grid-template-columns: 1fr;
      }

      .appShell #dailyTasksSection .taskStudioSidebar{
        position: static;
      }

      .appShell #dailyTasksSection .taskWorkspace{
        grid-template-columns: 1fr;
        min-height: 0;
      }

      .appShell #dailyTasksSection .taskDetailPane{
        max-height: none;
      }

      .appShell #dailyTasksSection .taskKanbanBoard,
      .appShell #dailyTasksSection .taskReportPanels{
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px){
      .appShell #dailyTasksSection .taskStudioCreateBtn{
        min-height: 58px;
        font-size: 18px;
        border-radius: 18px;
      }

      .appShell #dailyTasksSection .taskStudioTitleWrap h2{
        font-size: 34px;
      }

      .appShell #dailyTasksSection .taskStudioTitleWrap p{
        font-size: 16px;
      }

      .appShell #dailyTasksSection .taskStudioCollapseBtn{
        display: inline-flex;
      }

      .appShell #dailyTasksSection .taskStudioSidebarStats,
      .appShell #dailyTasksSection .taskStudioStats,
      .appShell #dailyTasksSection .taskProjectGrid,
      .appShell #dailyTasksSection .taskTeamGrid,
      .appShell #dailyTasksSection .taskSettingsGrid,
      .appShell #dailyTasksSection .taskReportCards{
        grid-template-columns: 1fr;
      }

      .appShell #dailyTasksSection .taskStudioSidebarNav{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .appShell #dailyTasksSection .taskStudioNavBtn{
        min-height: 52px;
        font-size: 14px;
      }

      .appShell #dailyTasksSection .taskStudioNavCount{
        min-width: 28px;
        height: 28px;
        font-size: 11px;
      }

      .appShell #dailyTasksSection .taskStudioFilters{
        display: grid;
        grid-template-columns: 1fr;
      }

      .appShell #dailyTasksSection .taskStudioFilters select,
      .appShell #dailyTasksSection .taskStudioFilters input,
      .appShell #dailyTasksSection .taskStudioFilters button{
        width: 100%;
        min-height: 52px;
        font-size: 14px;
      }

      .appShell #dailyTasksSection .taskStatCard{
        min-height: 118px;
        padding: 18px;
      }

      .appShell #dailyTasksSection .taskStatLabel{
        font-size: 16px;
      }

      .appShell #dailyTasksSection .taskStatValue{
        font-size: 38px;
      }

      .appShell #dailyTasksSection .taskStageChip{
        min-height: 42px;
        width: 100%;
        justify-content: space-between;
      }

      .appShell #dailyTasksSection .taskListZoho{
        max-height: none;
        padding: 14px;
      }

      .appShell #dailyTasksSection .taskBoardRow{
        padding: 16px;
      }

      .appShell #dailyTasksSection .taskBoardName{
        font-size: 18px;
      }

      .appShell #dailyTasksSection .taskProjectCard h3{
        font-size: 20px;
      }

      .appShell #dailyTasksSection .taskProjectCard p{
        min-height: 0;
      }
    }

    /* Visual refresh layer: modern components, keep original colors */
    .topbar,
    .monthlyTicker,
    .sidebarPanel,
    .card,
    .panel,
    .tableWrap,
    .tasksHead,
    .tasksWarning,
    .tasksEmpty{
      border-radius:18px !important;
      box-shadow:0 12px 28px rgba(15, 23, 42, 0.10) !important;
    }

    .btn{
      border-radius:13px !important;
      min-height:42px;
      font-weight:700;
      transition:transform .15s ease, box-shadow .15s ease;
    }

    .btn:hover{
      transform:translateY(-1px);
      box-shadow:0 10px 18px rgba(15, 23, 42, 0.14);
    }

    input, select, textarea, .search, .sourceFilter{
      border-radius:12px !important;
      min-height:42px;
    }

    .sidebarNav .btn,
    .viewDockBtn{
      border-radius:14px !important;
    }

    .card,
    .panel,
    .tableWrap{
      border:1px solid rgba(148, 163, 184, 0.24) !important;
    }

    .tableWrap table tr{
      transition:background-color .15s ease, transform .15s ease;
    }

    .tableWrap table tr:hover{
      transform:translateY(-1px);
    }