* { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --navy: #0d2d5e; --navy-deep: #071c3a; --green: #28b870; --green-glow: #3de098;
      --success: #34c759;
      --bg: #04101f; --text: #eef3ff; --muted: #8ca8cc;
      --glass-bg: rgba(13, 29, 56, 0.65); --glass-border: rgba(40, 184, 112, 0.25);
      --font-en: 'DM Sans', sans-serif; --font-heading: 'Montserrat', sans-serif;
    }

    body {
      font-family: var(--font-en);
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background-image:
        radial-gradient(circle at 5% 20%, rgba(40, 184, 112, 0.06), transparent 30%),
        radial-gradient(circle at 95% 10%, rgba(13, 45, 94, 0.45), transparent 30%),
        radial-gradient(circle at 50% 80%, rgba(40, 184, 112, 0.04), transparent 45%);
      background-attachment: fixed;
    }

    .dashboard-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem; flex: 1; }

    /* Header */
    .brand-header {
      display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 1.5rem;
    }
    .brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; }
    .brand-logo-img { width: 42px; height: 42px; filter: brightness(0) invert(1); }
    .brand__title { font-family: var(--font-heading); font-size: 1.45rem; letter-spacing: 0.3em; font-weight: 900; color: var(--text); line-height: 1; }
    .brand__subtitle { font-size: 0.6rem; color: var(--green); letter-spacing: 0.25em; text-transform: uppercase; font-weight: 600; }
    .header-actions { display: flex; gap: 1rem; align-items: center; }

    /* Buttons */
    .btn { padding: 0.6rem 1.2rem; border-radius: 12px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s; border: none; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
    .btn-primary { background: linear-gradient(135deg, var(--green), #1fa060); color: white; box-shadow: 0 4px 15px rgba(40, 184, 112, 0.3); }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(40, 184, 112, 0.45); }
    .btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.15); }
    .btn-secondary:hover { background: rgba(255, 255, 255, 0.15); }

    /* Tabs */
    .tabs-wrapper { display: flex; justify-content: center; margin-bottom: 2rem; width: 100%; }
    .tabs { display: flex; flex-wrap: wrap; justify-content: center; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 0.4rem; gap: 0.4rem; }
    .tab-btn { padding: 0.6rem 1rem; border-radius: 20px; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--muted); background: transparent; border: none; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
    .tab-btn:hover { color: white; }
    .tab-btn.active { background: var(--green); color: white; box-shadow: 0 4px 15px rgba(40, 184, 112, 0.35); }

    /* Layout */
    .card { background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 24px; padding: 2rem; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); margin-bottom: 2rem; }
    .card-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem; color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: 0.8rem; justify-content: space-between; }
    .card-title i { color: var(--green); }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1rem; }
    .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; margin-bottom: 1rem; }

    /* Forms */
    .form-group { margin-bottom: 1.2rem; }
    .form-group label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .form-control { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15); padding: 0.8rem 1rem; border-radius: 12px; color: white; font-size: 1rem; font-family: var(--font-en); }
    .form-control:focus { outline: none; border-color: var(--green); box-shadow: 0 0 12px rgba(40, 184, 112, 0.25); }
    .section-header { font-size: 1rem; font-weight: 700; color: var(--green-glow); margin: 1.5rem 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }

    table.items-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
    table.items-table th { text-align: left; padding: 0.8rem; font-size: 0.85rem; color: var(--muted); border-bottom: 1px solid rgba(255,255,255,0.1); }
    table.items-table td { padding: 0.5rem; }
    .items-table input, .items-table select, .items-table textarea { width: 100%; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); padding: 0.6rem; border-radius: 6px; color: white; box-sizing: border-box; height: 40px; }
    .items-table textarea { height: auto; }
    .items-table input:focus, .items-table select:focus, .items-table textarea:focus { outline: none; border-color: var(--green); }
    .item-delete-btn { color: #ff453a; background: transparent; border: none; cursor: pointer; font-size: 1.2rem; padding: 0.5rem; }

    table.data-table { width: 100%; border-collapse: collapse; text-align: left; }
    table.data-table th { padding: 1rem; color: var(--muted); border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
    table.data-table td { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.95rem; }
    table.data-table tr:hover td { background: rgba(255,255,255,0.02); }

    .badge-status { padding: 0.25rem 0.6rem; border-radius: 20px; font-weight: 700; font-size: 0.75rem; background: rgba(255,204,0,0.15); color: #ffcc00; }
    .badge-status.paid { background: rgba(52,199,89,0.15); color: var(--success); }
    .badge-status.suspended { background: rgba(255,69,58,0.15); color: #ff453a; }
    .badge-cat { padding: 0.25rem 0.6rem; border-radius: 6px; font-weight: 600; font-size: 0.75rem; background: rgba(255,255,255,0.1); color: white; }

    .checkbox-wrapper { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: white; text-transform: none; font-weight: normal; cursor: pointer; }
    .checkbox-wrapper input { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; }

    /* Modals & Overlays */
    .lock-screen, .modal-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.5rem; }
    .modal-overlay { background: rgba(4, 16, 31, 0.85); backdrop-filter: blur(8px); }
    .modal-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 24px; padding: 2.5rem; box-shadow: 0 20px 50px rgba(0,0,0,0.5); max-width: 400px; width: 100%; text-align: center; max-height: 90vh; overflow-y: auto; }

    /* Print View */
    .print-view { display: none; }
    /* Print Layout Styles (Used in both Preview Mode & Actual Print) */
    .print-header { display: flex; justify-content: space-between; margin-bottom: 15px; }
    .print-logo img { max-width: 250px; }
    .print-office-details { text-align: right; font-size: 11px; line-height: 1.5; color: black; }
    .print-office-details strong { font-size: 13px; }
    .print-text-link { color: #0000ee !important; }
    
    .print-tables-wrapper { display: flex; gap: 15px; margin-bottom: 15px; align-items: flex-start; color: black; }
    .print-table { border-collapse: collapse; width: 100%; font-size: 10px; margin-bottom: 15px; color: black; }
    .print-table th, .print-table td { border: 1px solid black; padding: 4px 6px; }
    .print-table th { background-color: #00b050 !important; color: black !important; font-weight: bold; text-align: left; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-table-item th { background-color: #00b050 !important; text-align: center; color: black !important; }
    .print-table-item td { text-align: center; border: 1px solid black; }
    .print-table-item td:nth-child(2) { text-align: left; }
    
    .print-totals { float: right; width: 300px; color: black; }
    .print-totals table { width: 100%; border-collapse: collapse; font-size: 10px; }
    .print-totals th, .print-totals td { border: 1px solid black; padding: 4px 6px; text-align: center; }
    .print-totals th { background-color: #00b050 !important; color: black !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .print-letters { margin-top: 10px; width: 100%; border-collapse: collapse; font-size: 10px;}
    .print-letters th { background-color: #00b050 !important; color: black !important; border: 1px solid black; padding: 4px; width: 30%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-letters td { background-color: #a9d08e !important; color: black !important; border: 1px solid black; padding: 4px; font-weight: bold; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .print-footer { text-align: center; font-size: 10px; color: #00b050 !important; margin-top: 25px; -webkit-print-color-adjust: exact; print-color-adjust: exact;}

    @media print {
      body * { visibility: hidden; }
      body { background: white; color: black; font-family: Arial, sans-serif; margin: 0; padding: 0; }
      .print-view, .print-view * { visibility: visible; }
      .print-view { display: block; position: absolute; left: 0; top: 0; width: 100%; padding: 15mm; }
    }

    /* HTML Preview Mode */
    body.preview-mode { background: #525659; padding: 2rem; display: flex; flex-direction: column; align-items: center; min-height: 100vh; overflow-y: auto; }
    body.preview-mode > *:not(#printView):not(#previewToolbar) { display: none !important; }

    /* Project Folders UI */
    .folder-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 2.5rem;
      padding: 1.5rem;
    }
    
    .mac-folder-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .mac-folder-wrapper:hover {
      transform: translateY(-5px) scale(1.03);
    }
    
    .mac-folder {
      width: 140px;
      height: 95px;
      background: var(--folder-color, #5ac8fa);
      border-radius: 0 8px 8px 8px;
      position: relative;
      box-shadow: 0 8px 20px rgba(0,0,0,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 1rem;
    }
    .mac-folder::before {
      content: '';
      position: absolute;
      top: -15px;
      left: 0;
      width: 50px;
      height: 15px;
      background: var(--folder-color, #5ac8fa);
      border-radius: 8px 8px 0 0;
      opacity: 0.9;
    }
    .mac-folder::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
      pointer-events: none;
    }
    
    .folder-label {
      text-align: center;
      width: 100%;
    }
    .folder-label h4 {
      margin: 0 0 0.4rem 0;
      color: white;
      font-size: 1.1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    .folder-label p {
      margin: 0 0 0.5rem 0;
      color: rgba(255,255,255,0.7);
      font-size: 0.85rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .document-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      padding: 1.5rem;
      text-align: left;
      transition: background 0.2s, transform 0.2s;
      cursor: pointer;
      position: relative;
    }
    .document-card:hover {
      background: rgba(255,255,255,0.06);
      transform: translateY(-3px);
    }
    .document-icon {
      font-size: 2.5rem;
      color: rgba(255,255,255,0.8);
      margin-bottom: 1rem;
    }
    body.preview-mode #printView { display: block; background: white; color: black; font-family: Arial, sans-serif; width: 210mm; min-height: 297mm; padding: 15mm; margin-top: 60px; box-shadow: 0 5px 20px rgba(0,0,0,0.5); position: relative; }
    #previewToolbar { display: none; position: fixed; top: 0; left: 0; right: 0; background: #323639; padding: 1rem 2rem; z-index: 10000; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
    body.preview-mode #previewToolbar { display: flex; }
    /* Dashboard Print Styles */
    .dashboard-print { display: none; background: white; color: black; font-family: 'Segoe UI', Arial, sans-serif; width: 297mm; min-height: 210mm; padding: 10mm; margin-top: 60px; box-shadow: 0 5px 20px rgba(0,0,0,0.5); position: relative; }
    body.preview-mode .dashboard-print { display: block; }
    
    .dash-header { display: flex; justify-content: space-between; margin-bottom: 15px; border-bottom: 2px solid #00509e; padding-bottom: 5px; }
    .dash-title { color: #00509e; font-size: 24px; font-weight: bold; text-transform: uppercase; }
    .dash-info { font-size: 10px; text-align: right; }
    
    .dash-layout { display: flex; gap: 10px; }
    .dash-left { flex: 1.6; }
    .dash-right { flex: 1; display: flex; flex-direction: column; gap: 10px; }
    
    .dash-table { width: 100%; border-collapse: collapse; font-size: 9px; }
    .dash-table th, .dash-table td { border: 1px solid #ccc; padding: 3px 4px; text-align: left; }
    .dash-table th { background: #00509e; color: white; font-weight: bold; text-align: center; }
    .dash-table tr:nth-child(even) { background-color: #f2f2f2; }
    
    .dash-box { border: 1px solid #00509e; background: #f9f9f9; padding: 5px; }
    .dash-box-title { background: #00509e; color: white; font-size: 10px; font-weight: bold; padding: 3px 5px; margin: -5px -5px 5px -5px; }
    .dash-stat-row { display: flex; justify-content: space-between; border-bottom: 1px dashed #ccc; padding: 2px 0; font-size: 9px; font-weight: bold; }
    
    .dash-chart-container { height: 150px; background: white; margin-bottom: 10px; padding: 5px; border: 1px solid #eee; position: relative; }

    /* =========================================================================
       MOBILE RESPONSIVENESS OVERRIDES FOR ACCOUNTING PORTAL
       ========================================================================= */
    @media screen and (max-width: 991px) {
      .dashboard-container { padding: 1rem 0.5rem; }
      
      /* Make inline grid rows stack */
      .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: 1rem; }
      
      .card div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
      }
      
      /* Ensure parent flex containers stack (like the split layout for Total Expenses) */
      .card > div[style*="display: flex"] {
        flex-direction: column !important;
      }
      
      /* Wrap tables for horizontal scrolling */
      .data-table-wrapper, 
      [style*="max-height: 400px; overflow-y: auto"],
      table.data-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
      }
      
      /* Reposition math symbols (+ and =) to sit perfectly centered below their box when stacked */
      .card div[style*="position: absolute; right: -0.7rem"],
      .card div[style*="position: absolute; right: -1rem"] {
        right: 50% !important;
        top: auto !important;
        bottom: -0.75rem !important;
        transform: translateX(50%) translateY(50%) !important;
        z-index: 10 !important;
      }
    }