:root {
      --navy-deep: #0B1A2F;
      --navy-card: #102A43;
      --copper: #C87A4F;
      --copper-dim: #a05a3a;
      --cream: #F5F0E8;
      --white-soft: #EAE4D9;
      --text-muted: #8A9CAF;
      --shadow-copper: 0 8px 32px rgba(200, 122, 79, 0.08);
      --compliance-color: #5A6A7A;
      --legal-bg: #0A1625;
      --success: #4caf50;
      --warning: #d4a94f;
      --danger: #b54a4a;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background-color: var(--navy-deep);
      color: var(--cream);
      font-family: 'Inter', sans-serif;
      font-weight: 300;
      line-height: 1.6;
      min-height: 100vh;
      display: flex;
    }

    .login-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(circle at 50% 40%, rgba(200,122,79,0.05) 0%, #0B1A2F 70%);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .login-box {
      background: var(--navy-card);
      padding: 3rem 2.5rem;
      border-radius: 2px;
      max-width: 420px;
      width: 90%;
      border: 1px solid var(--copper);
      box-shadow: var(--shadow-copper);
      text-align: center;
    }

    .login-box h2 {
      font-family: 'Playfair Display', serif;
      color: var(--copper);
      font-weight: 400;
      font-size: 2rem;
      margin-bottom: 0.5rem;
    }
    .login-box p { color: var(--text-muted); margin-bottom: 2rem; font-size: 0.9rem; }
    .login-box .form-group { margin-bottom: 1.5rem; text-align: left; }
    .login-box label {
      display: block;
      color: var(--text-muted);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.4rem;
    }
    .login-box input {
      width: 100%;
      padding: 0.8rem;
      background: var(--navy-deep);
      border: 1px solid rgba(200,122,79,0.2);
      color: var(--cream);
      font-family: 'Inter', sans-serif;
      font-size: 0.9rem;
    }
    .login-box .btn { width: 100%; margin-top: 0.5rem; }
    .login-error { color: var(--danger); font-size: 0.85rem; margin-top: 0.8rem; min-height: 1.2em; }

    .btn {
      display: inline-block;
      padding: 1rem 2.5rem;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: 2px;
      transition: all 0.3s ease;
      text-decoration: none;
      cursor: pointer;
    }
    .btn-primary { background: var(--copper); color: white; border: 1px solid var(--copper); }
    .btn-primary:hover { background: var(--copper-dim); border-color: var(--copper-dim); box-shadow: var(--shadow-copper); }
    .btn-secondary { background: transparent; color: var(--copper); border: 1px solid var(--copper); }
    .btn-secondary:hover { background: rgba(200,122,79,0.08); }

    .sidebar {
      width: 260px;
      background: #060F1C;
      padding: 2rem 1.5rem;
      display: flex;
      flex-direction: column;
      border-right: 1px solid rgba(200,122,79,0.15);
      position: fixed;
      top: 0; left: 0; bottom: 0;
      z-index: 10;
    }
    .sidebar-logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
      color: var(--copper);
      margin-bottom: 3rem;
      text-align: center;
      letter-spacing: 0.02em;
    }
    .sidebar-logo span { font-size: 0.7rem; display: block; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.2rem; }
    .sidebar-nav { list-style: none; flex: 1; }
    .sidebar-nav li { margin-bottom: 0.3rem; }
    .sidebar-nav a {
      display: flex; align-items: center; gap: 0.8rem;
      padding: 0.8rem 1rem;
      color: var(--text-muted);
      text-decoration: none;
      border-radius: 2px;
      transition: all 0.3s;
      font-size: 0.9rem;
      letter-spacing: 0.02em;
      cursor: pointer;
    }
    .sidebar-nav a:hover, .sidebar-nav a.active { background: rgba(200,122,79,0.08); color: var(--copper); }
    .sidebar-nav a.active { border-left: 2px solid var(--copper); }
    .sidebar-footer { border-top: 1px solid rgba(200,122,79,0.15); padding-top: 1.5rem; font-size: 0.75rem; color: var(--text-muted); }
    .sidebar-footer .user { color: var(--cream); font-weight: 400; margin-bottom: 0.3rem; }

    .main-content { margin-left: 260px; flex: 1; padding: 2rem 3rem; width: 100%; }
    .top-bar {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 2.5rem; padding-bottom: 1.5rem;
      border-bottom: 1px solid rgba(200,122,79,0.15);
    }
    .top-bar h1 { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 400; color: var(--cream); }
    .top-bar .badge-status { background: rgba(76,175,80,0.15); color: var(--success); padding: 0.4rem 1rem; border-radius: 2px; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }

    .tab-nav { display: flex; gap: 2rem; border-bottom: 1px solid rgba(200,122,79,0.15); margin-bottom: 2rem; padding-bottom: 1rem; }
    .tab-nav a {
      color: var(--text-muted); text-decoration: none; font-size: 1rem; font-weight: 400;
      letter-spacing: 0.03em; padding-bottom: 0.5rem; border-bottom: 2px solid transparent;
      transition: all 0.3s; cursor: pointer;
    }
    .tab-nav a:hover, .tab-nav a.active { color: var(--copper); border-bottom-color: var(--copper); }

    .tab-content { display: none; }
    .tab-content.active { display: block; }

    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; }
    .stat-card {
      background: var(--navy-card); padding: 1.5rem;
      border-top: 1px solid var(--copper); border-radius: 2px;
    }
    .stat-card .label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
    .stat-card .value { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--copper); }

    .panel { background: var(--navy-card); border-radius: 2px; padding: 1.5rem; border: 1px solid rgba(200,122,79,0.1); margin-bottom: 2rem; }
    .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
    .panel-header h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 1.3rem; color: var(--cream); }
    .table-container { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    th {
      text-align: left; padding: 0.8rem;
      color: var(--text-muted); font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem;
      border-bottom: 1px solid rgba(200,122,79,0.2);
    }
    td { padding: 0.8rem; border-bottom: 1px solid rgba(200,122,79,0.08); }
    tr:hover td { background: rgba(200,122,79,0.03); }
    .badge-status-sm {
      display: inline-block; padding: 0.2rem 0.6rem; border-radius: 2px;
      font-size: 0.75rem; font-weight: 500;
    }
    .status-active { background: rgba(76,175,80,0.15); color: var(--success); }
    .status-inactive { background: rgba(180,80,80,0.15); color: var(--danger); }
    .status-pending { background: rgba(212,169,79,0.15); color: var(--warning); }

    .btn-sm {
      display: inline-block; padding: 0.4rem 1rem; font-size: 0.75rem; font-weight: 500;
      letter-spacing: 0.04em; text-transform: uppercase; border-radius: 2px;
      transition: all 0.3s; cursor: pointer; border: 1px solid var(--copper);
      background: transparent; color: var(--copper); margin-right: 0.3rem; margin-bottom: 0.2rem;
    }
    .btn-sm:hover { background: rgba(200,122,79,0.08); }
    .btn-sm.danger { border-color: var(--danger); color: var(--danger); }
    .btn-sm.danger:hover { background: rgba(180,80,80,0.08); }
    .btn-sm.success { border-color: var(--success); color: var(--success); }
    .btn-sm.success:hover { background: rgba(76,175,80,0.08); }
    .btn-sm.warning { border-color: var(--warning); color: var(--warning); }
    .btn-sm.warning:hover { background: rgba(212,169,79,0.08); }
    .btn-sm.info { border-color: #5b9bd5; color: #5b9bd5; }
    .btn-sm.info:hover { background: rgba(91,155,213,0.08); }

    .cashflow-table td.positive { color: var(--success); }
    .cashflow-table td.negative { color: var(--danger); }

    .error-banner {
      background: rgba(180,80,80,0.15); color: var(--danger); padding: 1rem;
      border: 1px solid var(--danger); margin-bottom: 1.5rem; display: none;
    }
    .success-banner {
      background: rgba(76,175,80,0.15); color: var(--success); padding: 1rem;
      border: 1px solid var(--success); margin-bottom: 1.5rem; display: none;
    }
    .loading-spinner { text-align: center; padding: 2rem; color: var(--text-muted); }

    /* Modal */
    .modal-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center;
      z-index: 100;
    }
    .modal-overlay.active { display: flex; }
    .modal {
      background: var(--navy-card); border: 1px solid var(--copper); padding: 2rem;
      max-width: 500px; width: 90%; border-radius: 2px; max-height: 80vh; overflow-y: auto;
    }
    .modal h3 {
      font-family: 'Playfair Display', serif; color: var(--copper);
      margin-bottom: 1.5rem; font-weight: 400;
    }
    .modal .form-group { margin-bottom: 1.2rem; }
    .modal label {
      display: block; color: var(--text-muted); font-size: 0.8rem;
      text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem;
    }
    .modal input, .modal select, .modal textarea {
      width: 100%; padding: 0.7rem; background: var(--navy-deep);
      border: 1px solid rgba(200,122,79,0.2); color: var(--cream);
      font-family: 'Inter', sans-serif; font-size: 0.9rem;
    }
    .modal textarea { resize: vertical; min-height: 80px; }
    .modal-buttons { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem; flex-wrap: wrap; }
    .modal-error { color: var(--danger); font-size: 0.85rem; margin-top: 0.5rem; min-height: 1.2em; }

    .info-box {
      background: rgba(200,122,79,0.05); border: 1px solid rgba(200,122,79,0.2);
      padding: 1rem; margin-bottom: 1rem; border-radius: 2px;
    }
    .info-box code {
      background: var(--navy-deep); padding: 0.2rem 0.5rem; border-radius: 2px;
      font-size: 0.85rem; color: var(--copper); word-break: break-all;
    }
    
    .toast-notification {
      position: fixed;
      top: 20px;
      right: 20px;
      background: var(--navy-card);
      border: 1px solid var(--copper);
      padding: 1rem 1.5rem;
      border-radius: 4px;
      z-index: 9999;
      color: var(--cream);
      font-size: 0.9rem;
      box-shadow: var(--shadow-copper);
      transform: translateX(120%);
      transition: transform 0.3s ease;
      max-width: 400px;
    }
    .toast-notification.show { transform: translateX(0); }
    .toast-notification.success { border-color: var(--success); background: rgba(76,175,80,0.2); }
    .toast-notification.error { border-color: var(--danger); background: rgba(180,80,80,0.2); }
    .toast-notification.warning { border-color: var(--warning); background: rgba(212,169,79,0.2); }

    footer {
      background: #060F1C; padding: 2rem 1rem; text-align: center; margin-top: 3rem;
      border-top: 1px solid rgba(200,122,79,0.15);
    }
    .footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; margin: 0 1.5rem; }
    .footer-links a:hover { color: var(--copper); }
    .legal-container {
      background: var(--legal-bg); border-top: 1px solid rgba(200,122,79,0.15);
      padding: 2rem 2rem 3rem; text-align: left; max-width: 900px; margin: 1rem auto 0;
      color: var(--text-muted); font-weight: 300; font-size: 0.9rem; line-height: 1.8; display: none;
    }
    .legal-container.active { display: block; }

    @media (max-width: 1024px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .sidebar { width: 200px; }
      .main-content { margin-left: 200px; padding: 1.5rem; }
    }
    @media (max-width: 768px) {
      .sidebar { display: none; }
      .main-content { margin-left: 0; }
      .stats-grid { grid-template-columns: 1fr; }
    }