.dashboard.svelte-lztlh0 {
    padding: 2rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .page-header.svelte-lztlh0 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }

  .header-left.svelte-lztlh0 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .header-left.svelte-lztlh0 h1:where(.svelte-lztlh0) {
    margin: 0;
    font-size: 2rem;
    color: #1f2937;
  }

  .last-update.svelte-lztlh0 {
    font-size: 0.875rem;
    color: #ef4444;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .header-right.svelte-lztlh0 {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .realtime-toggle.svelte-lztlh0 {
    padding: 0.75rem 1.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s;
    color: #6b7280;
  }

  .realtime-toggle.active.svelte-lztlh0 {
    background: #fee2e2;
    border-color: #ef4444;
    color: #ef4444;
  }

  .realtime-toggle.svelte-lztlh0:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .status-badge.svelte-lztlh0 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 600;
  }

  .status-badge.connected.svelte-lztlh0 {
    color: #22c55e;
  }

  .status-dot.svelte-lztlh0 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
  }

  .status-badge.connected.svelte-lztlh0 .status-dot:where(.svelte-lztlh0) {
    background: #22c55e;
    animation: svelte-lztlh0-pulse 2s infinite;
  }

  @keyframes svelte-lztlh0-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  .loading.svelte-lztlh0, .error.svelte-lztlh0 {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
    font-size: 1.1rem;
  }

  .error.svelte-lztlh0 {
    color: #ef4444;
  }

  section.svelte-lztlh0 {
    margin-bottom: 2.5rem;
  }

  h2.svelte-lztlh0 {
    font-size: 1.25rem;
    color: #1f2937;
    margin-bottom: 1rem;
    font-weight: 600;
  }

  .metrics-grid.svelte-lztlh0 {
    display: flex;
    gap: 1.5rem;
    width: 100%;
  }

  .metric-card.svelte-lztlh0 {
    flex: 1;
    min-width: 0;
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .metric-card.svelte-lztlh0:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .metric-header.svelte-lztlh0 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .metric-icon.svelte-lztlh0 {
    font-size: 1.5rem;
  }

  .metric-label.svelte-lztlh0 {
    font-size: 0.875rem;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
  }

  .metric-value.svelte-lztlh0 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
  }

  .progress-bar.svelte-lztlh0 {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
  }

  .progress-fill.svelte-lztlh0 {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 4px;
  }

  .metric-percentage.svelte-lztlh0 {
    font-size: 0.875rem;
    color: #6b7280;
  }

  .scenario-tabs.svelte-lztlh0 {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }

  .scenario-tab.svelte-lztlh0 {
    flex: 1;
    min-width: 200px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
  }

  .scenario-tab.svelte-lztlh0:hover {
    border-color: #113783;
    transform: translateY(-2px);
  }

  .scenario-tab.active.svelte-lztlh0 {
    border-color: #113783;
    background: #f0f4ff;
  }

  .scenario-tab.recommended.svelte-lztlh0 {
    border-color: #22c55e;
  }

  .scenario-tab.recommended.active.svelte-lztlh0 {
    background: #f0fdf4;
    border-color: #22c55e;
  }

  .tab-header.svelte-lztlh0 {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .badge-recommended.svelte-lztlh0 {
    background: #22c55e;
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-weight: 600;
  }

  .tab-description.svelte-lztlh0 {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
  }

  .tab-total.svelte-lztlh0 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #113783;
  }

  .scenario-content.svelte-lztlh0 {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .scenario-header.svelte-lztlh0 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
  }

  .scenario-info.svelte-lztlh0 h3:where(.svelte-lztlh0) {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: #1f2937;
  }

  .scenario-info.svelte-lztlh0 p:where(.svelte-lztlh0) {
    margin: 0;
    color: #6b7280;
  }

  .scenario-stats.svelte-lztlh0 {
    display: flex;
    gap: 2rem;
  }

  .stat.svelte-lztlh0 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .stat-label.svelte-lztlh0 {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
  }

  .stat-value.svelte-lztlh0 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #113783;
  }

  .plans-grid.svelte-lztlh0 {
    display: flex;
    gap: 1.5rem;
    width: 100%;
  }

  .plan-card.svelte-lztlh0 {
    flex: 1;
    min-width: 0;
    background: #f9fafb;
    border-radius: 12px;
    padding: 1.5rem;
    border: 2px solid #e5e7eb;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .plan-card.empty.svelte-lztlh0 {
    opacity: 0.5;
  }

  .plan-card.svelte-lztlh0:not(.empty):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .plan-header.svelte-lztlh0 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
  }

  .plan-header.svelte-lztlh0 h3:where(.svelte-lztlh0) {
    margin: 0;
    font-size: 1.25rem;
    color: #1f2937;
  }

  .stock-badge.svelte-lztlh0 {
    padding: 0.25rem 0.75rem;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .stock-badge.low.svelte-lztlh0 {
    background: #fef3c7;
    color: #d97706;
  }

  .stock-badge.zero.svelte-lztlh0 {
    background: #fee2e2;
    color: #dc2626;
  }

  .plan-specs.svelte-lztlh0 {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .spec.svelte-lztlh0 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
  }

  .spec-icon.svelte-lztlh0 {
    font-size: 1rem;
  }

  .history.svelte-1t4jzn8 {
    padding: 2rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .page-header.svelte-1t4jzn8 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }

  .page-header.svelte-1t4jzn8 h1:where(.svelte-1t4jzn8) {
    margin: 0;
    font-size: 2rem;
    color: #1f2937;
  }

  .period-selector.svelte-1t4jzn8 {
    display: flex;
    gap: 0.5rem;
    background: white;
    padding: 0.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .period-btn.svelte-1t4jzn8 {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    transition: all 0.2s;
  }

  .period-btn.svelte-1t4jzn8:hover {
    background: #f3f4f6;
  }

  .period-btn.active.svelte-1t4jzn8 {
    background: #113783;
    color: white;
  }

  .loading.svelte-1t4jzn8 {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
    font-size: 1.1rem;
  }

  .no-data.svelte-1t4jzn8 {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .no-data.svelte-1t4jzn8 p:where(.svelte-1t4jzn8) {
    margin: 0.5rem 0;
    color: #6b7280;
  }

  .no-data-help.svelte-1t4jzn8 {
    font-size: 0.875rem;
    color: #9ca3af;
  }

  .charts-grid.svelte-1t4jzn8 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .chart-card.svelte-1t4jzn8 {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .chart-header.svelte-1t4jzn8 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .chart-title.svelte-1t4jzn8 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .chart-icon.svelte-1t4jzn8 {
    font-size: 1.5rem;
  }

  .chart-title.svelte-1t4jzn8 h3:where(.svelte-1t4jzn8) {
    margin: 0;
    font-size: 1.25rem;
    color: #1f2937;
  }

  .chart-stats.svelte-1t4jzn8 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .stat-label.svelte-1t4jzn8 {
    font-size: 0.875rem;
    color: #6b7280;
  }

  .stat-value.svelte-1t4jzn8 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #113783;
  }

  .chart-container.svelte-1t4jzn8 {
    height: 300px;
    position: relative;
  }

  .alerts-panel.svelte-7b9l6f {
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
  }

  .page-header.svelte-7b9l6f {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }

  .page-header.svelte-7b9l6f h1:where(.svelte-7b9l6f) {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: #1f2937;
  }

  .subtitle.svelte-7b9l6f {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
  }

  .header-actions.svelte-7b9l6f {
    display: flex;
    gap: 0.5rem;
  }

  .btn-tab.svelte-7b9l6f {
    padding: 0.75rem 1.5rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    color: #6b7280;
  }

  .btn-tab.svelte-7b9l6f:hover {
    border-color: #113783;
  }

  .btn-tab.active.svelte-7b9l6f {
    background: #113783;
    border-color: #113783;
    color: white;
  }

  .no-alerts.svelte-7b9l6f {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .no-alerts-icon.svelte-7b9l6f {
    font-size: 4rem;
    margin-bottom: 1rem;
  }

  .no-alerts.svelte-7b9l6f h3:where(.svelte-7b9l6f) {
    margin: 0 0 0.5rem 0;
    color: #1f2937;
  }

  .no-alerts.svelte-7b9l6f p:where(.svelte-7b9l6f) {
    margin: 0;
    color: #6b7280;
  }

  .alerts-list.svelte-7b9l6f {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .alert-card.svelte-7b9l6f {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: white;
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .alert-icon.svelte-7b9l6f {
    font-size: 2rem;
  }

  .alert-content.svelte-7b9l6f {
    flex: 1;
  }

  .alert-header.svelte-7b9l6f {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }

  .alert-header.svelte-7b9l6f h3:where(.svelte-7b9l6f) {
    margin: 0;
    font-size: 1.25rem;
    color: #1f2937;
  }

  .alert-time.svelte-7b9l6f {
    font-size: 0.875rem;
    color: #6b7280;
  }

  .alert-message.svelte-7b9l6f {
    margin: 0 0 1rem 0;
    color: #4b5563;
  }

  .alert-stats.svelte-7b9l6f {
    display: flex;
    gap: 2rem;
  }

  .stat.svelte-7b9l6f {
    font-size: 0.875rem;
    color: #6b7280;
  }

  .stat.svelte-7b9l6f strong:where(.svelte-7b9l6f) {
    color: #1f2937;
  }

  .alert-actions.svelte-7b9l6f {
    display: flex;
    gap: 0.5rem;
  }

  .btn-action.svelte-7b9l6f {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.2s;
  }

  .btn-resolve.svelte-7b9l6f {
    background: #dcfce7;
    color: #16a34a;
  }

  .btn-resolve.svelte-7b9l6f:hover {
    background: #bbf7d0;
  }

  .btn-dismiss.svelte-7b9l6f {
    background: #fee2e2;
    color: #dc2626;
  }

  .btn-dismiss.svelte-7b9l6f:hover {
    background: #fecaca;
  }

  .history-list.svelte-7b9l6f {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .history-item.svelte-7b9l6f {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .history-item.resolved.svelte-7b9l6f {
    opacity: 0.7;
  }

  .history-item.dismissed.svelte-7b9l6f {
    opacity: 0.5;
  }

  .history-icon.svelte-7b9l6f {
    font-size: 1.5rem;
  }

  .history-content.svelte-7b9l6f {
    flex: 1;
  }

  .history-header.svelte-7b9l6f {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }

  .history-header.svelte-7b9l6f h4:where(.svelte-7b9l6f) {
    margin: 0;
    font-size: 1.1rem;
    color: #1f2937;
  }

  .status-badge.svelte-7b9l6f {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .status-active.svelte-7b9l6f {
    background: #fef3c7;
    color: #d97706;
  }

  .status-resolved.svelte-7b9l6f {
    background: #dcfce7;
    color: #16a34a;
  }

  .status-dismissed.svelte-7b9l6f {
    background: #fee2e2;
    color: #dc2626;
  }

  .history-message.svelte-7b9l6f {
    margin: 0 0 0.75rem 0;
    color: #6b7280;
    font-size: 0.95rem;
  }

  .history-footer.svelte-7b9l6f {
    display: flex;
    gap: 2rem;
    font-size: 0.875rem;
    color: #9ca3af;
  }

  .settings-intro.svelte-7b9l6f {
    padding: 1.5rem;
    background: #f0f4ff;
    border-radius: 12px;
    margin-bottom: 2rem;
  }

  .settings-intro.svelte-7b9l6f h3:where(.svelte-7b9l6f) {
    margin: 0 0 0.5rem 0;
    color: #113783;
  }

  .settings-intro.svelte-7b9l6f p:where(.svelte-7b9l6f) {
    margin: 0;
    color: #4b5563;
  }

  .config-list.svelte-7b9l6f {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
  }

  .config-card.svelte-7b9l6f {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .config-header.svelte-7b9l6f {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .config-header.svelte-7b9l6f h4:where(.svelte-7b9l6f) {
    margin: 0;
    color: #1f2937;
  }

  .toggle.svelte-7b9l6f {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
  }

  .toggle.svelte-7b9l6f input:where(.svelte-7b9l6f) {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .toggle-slider.svelte-7b9l6f {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s;
    border-radius: 26px;
  }

  .toggle-slider.svelte-7b9l6f:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
  }

  .toggle.svelte-7b9l6f input:where(.svelte-7b9l6f):checked + .toggle-slider:where(.svelte-7b9l6f) {
    background-color: #22c55e;
  }

  .toggle.svelte-7b9l6f input:where(.svelte-7b9l6f):checked + .toggle-slider:where(.svelte-7b9l6f):before {
    transform: translateX(24px);
  }

  .config-body.svelte-7b9l6f label:where(.svelte-7b9l6f) {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
  }

  .config-body.svelte-7b9l6f input[type="number"]:where(.svelte-7b9l6f) {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
  }

  .config-body.svelte-7b9l6f input[type="number"]:where(.svelte-7b9l6f):disabled {
    background: #f3f4f6;
    cursor: not-allowed;
  }

  .config-help.svelte-7b9l6f {
    margin: 0.75rem 0 0 0;
    font-size: 0.875rem;
    color: #6b7280;
  }

  .no-data.svelte-7b9l6f {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 12px;
    color: #6b7280;
  }

  .plans-manager.svelte-1bvcj95 {
    padding: 2rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .page-header.svelte-1bvcj95 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }

  .page-header.svelte-1bvcj95 h1:where(.svelte-1bvcj95) {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: #1f2937;
  }

  .subtitle.svelte-1bvcj95 {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
  }

  .btn-primary.svelte-1bvcj95 {
    padding: 0.75rem 1.5rem;
    background: #113783;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }

  .btn-primary.svelte-1bvcj95:hover {
    background: #0d2a5f;
  }

  .loading.svelte-1bvcj95 {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
  }

  .plans-grid.svelte-1bvcj95 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
  }

  .plan-card.svelte-1bvcj95 {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .plan-card.inactive.svelte-1bvcj95 {
    opacity: 0.6;
  }

  .plan-card.svelte-1bvcj95:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .plan-header.svelte-1bvcj95 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e5e7eb;
  }

  .plan-title.svelte-1bvcj95 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .plan-title.svelte-1bvcj95 h3:where(.svelte-1bvcj95) {
    margin: 0;
    font-size: 1.5rem;
    color: #1f2937;
  }

  .badge-inactive.svelte-1bvcj95 {
    padding: 0.25rem 0.75rem;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .plan-actions.svelte-1bvcj95 {
    display: flex;
    gap: 0.5rem;
  }

  .btn-icon.svelte-1bvcj95 {
    padding: 0.5rem;
    background: #f3f4f6;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
  }

  .btn-icon.svelte-1bvcj95:hover {
    background: #e5e7eb;
  }

  .btn-icon.btn-danger.svelte-1bvcj95:hover {
    background: #fee2e2;
  }

  .plan-specs.svelte-1bvcj95 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .spec.svelte-1bvcj95 {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
  }

  .spec-icon.svelte-1bvcj95 {
    font-size: 1.5rem;
  }

  .spec-details.svelte-1bvcj95 {
    display: flex;
    flex-direction: column;
  }

  .spec-label.svelte-1bvcj95 {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 600;
  }

  .spec-value.svelte-1bvcj95 {
    font-size: 1.1rem;
    color: #1f2937;
    font-weight: 600;
  }

  .plan-footer.svelte-1bvcj95 {
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
  }

  .plan-date.svelte-1bvcj95 {
    font-size: 0.875rem;
    color: #9ca3af;
  }

  .modal-overlay.svelte-1bvcj95 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .modal.svelte-1bvcj95 {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .modal-header.svelte-1bvcj95 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
  }

  .modal-header.svelte-1bvcj95 h2:where(.svelte-1bvcj95) {
    margin: 0;
    font-size: 1.5rem;
    color: #1f2937;
  }

  .modal-close.svelte-1bvcj95 {
    padding: 0.5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    transition: color 0.2s;
  }

  .modal-close.svelte-1bvcj95:hover {
    color: #1f2937;
  }

  .modal-body.svelte-1bvcj95 {
    padding: 1.5rem;
  }

  .form-error.svelte-1bvcj95 {
    padding: 0.75rem;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
  }

  .form-group.svelte-1bvcj95 {
    margin-bottom: 1.5rem;
  }

  .form-group.svelte-1bvcj95 label:where(.svelte-1bvcj95) {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
  }

  .form-group.svelte-1bvcj95 input:where(.svelte-1bvcj95) {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
  }

  .form-group.svelte-1bvcj95 input:where(.svelte-1bvcj95):focus {
    outline: none;
    border-color: #113783;
    box-shadow: 0 0 0 3px rgba(17, 55, 131, 0.1);
  }

  .form-row.svelte-1bvcj95 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .modal-footer.svelte-1bvcj95 {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
  }

  .btn-secondary.svelte-1bvcj95 {
    padding: 0.75rem 1.5rem;
    background: #f3f4f6;
    color: #374151;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }

  .btn-secondary.svelte-1bvcj95:hover {
    background: #e5e7eb;
  }

  .reports.svelte-1602g7j {
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
  }

  .page-header.svelte-1602g7j {
    margin-bottom: 2rem;
  }

  .page-header.svelte-1602g7j h1:where(.svelte-1602g7j) {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: #1f2937;
  }

  .subtitle.svelte-1602g7j {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
  }

  .reports-grid.svelte-1602g7j {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .report-card.svelte-1602g7j {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .report-card.svelte-1602g7j:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .report-card.featured.svelte-1602g7j {
    border: 2px solid #113783;
    background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
  }

  .report-icon.svelte-1602g7j {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .report-content.svelte-1602g7j {
    flex: 1;
  }

  .report-content.svelte-1602g7j h3:where(.svelte-1602g7j) {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    color: #1f2937;
  }

  .report-description.svelte-1602g7j {
    margin: 0 0 1.5rem 0;
    color: #6b7280;
    line-height: 1.6;
  }

  .report-includes.svelte-1602g7j {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
  }

  .report-includes.svelte-1602g7j li:where(.svelte-1602g7j) {
    padding: 0.5rem 0;
    color: #4b5563;
    font-size: 0.95rem;
  }

  .period-selector.svelte-1602g7j {
    margin: 1rem 0;
  }

  .period-selector.svelte-1602g7j .label:where(.svelte-1602g7j) {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.95rem;
  }

  .period-buttons.svelte-1602g7j {
    display: flex;
    gap: 0.5rem;
  }

  .btn-period.svelte-1602g7j {
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
  }

  .btn-period.svelte-1602g7j:hover:not(:disabled) {
    background: #e5e7eb;
    border-color: #113783;
  }

  .btn-period.svelte-1602g7j:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-export.svelte-1602g7j {
    padding: 0.875rem 1.5rem;
    background: #f3f4f6;
    color: #374151;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
  }

  .btn-export.svelte-1602g7j:hover:not(:disabled) {
    background: #e5e7eb;
    transform: translateY(-1px);
  }

  .btn-export.svelte-1602g7j:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .btn-primary.svelte-1602g7j {
    background: #113783;
    color: white;
  }

  .btn-primary.svelte-1602g7j:hover:not(:disabled) {
    background: #0d2a5f;
  }

  .info-box.svelte-1602g7j {
    display: flex;
    gap: 1.5rem;
    background: #fffbeb;
    border: 2px solid #fbbf24;
    border-radius: 12px;
    padding: 1.5rem;
  }

  .info-icon.svelte-1602g7j {
    font-size: 2rem;
  }

  .info-content.svelte-1602g7j h4:where(.svelte-1602g7j) {
    margin: 0 0 1rem 0;
    color: #92400e;
  }

  .info-content.svelte-1602g7j ul:where(.svelte-1602g7j) {
    margin: 0;
    padding-left: 1.5rem;
    color: #78350f;
  }

  .info-content.svelte-1602g7j li:where(.svelte-1602g7j) {
    margin-bottom: 0.5rem;
    line-height: 1.6;
  }

  .info-content.svelte-1602g7j strong:where(.svelte-1602g7j) {
    color: #92400e;
  }

  .login-container.svelte-8ukb9p {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem;
  }

  .login-card.svelte-8ukb9p {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 450px;
    overflow: hidden;
  }

  .login-header.svelte-8ukb9p {
    background: linear-gradient(135deg, #113783 0%, #0d2a5f 100%);
    color: white;
    padding: 3rem 2rem;
    text-align: center;
  }

  .logo.svelte-8ukb9p {
    font-size: 4rem;
    margin-bottom: 1rem;
  }

  .login-header.svelte-8ukb9p h1:where(.svelte-8ukb9p) {
    margin: 0 0 0.5rem 0;
    font-size: 2.5rem;
    font-weight: 700;
  }

  .subtitle.svelte-8ukb9p {
    margin: 0;
    opacity: 0.9;
    font-size: 1.1rem;
  }

  .login-body.svelte-8ukb9p {
    padding: 3rem 2rem;
  }

  .login-body.svelte-8ukb9p h2:where(.svelte-8ukb9p) {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    color: #1f2937;
    text-align: center;
  }

  .description.svelte-8ukb9p {
    text-align: center;
    color: #6b7280;
    margin: 0 0 2rem 0;
  }

  .error-message.svelte-8ukb9p {
    background: #fee2e2;
    color: #dc2626;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 0.95rem;
  }

  .loading.svelte-8ukb9p {
    text-align: center;
    padding: 2rem 0;
  }

  .spinner.svelte-8ukb9p {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    border: 4px solid #f3f4f6;
    border-top: 4px solid #113783;
    border-radius: 50%;
    animation: svelte-8ukb9p-spin 1s linear infinite;
  }

  @keyframes svelte-8ukb9p-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .loading.svelte-8ukb9p p:where(.svelte-8ukb9p) {
    color: #6b7280;
    margin: 0;
  }

  .google-button-container.svelte-8ukb9p {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
  }

  .login-footer.svelte-8ukb9p {
    background: #f9fafb;
    padding: 1.5rem 2rem;
    text-align: center;
    border-top: 1px solid #e5e7eb;
  }

  .login-footer.svelte-8ukb9p p:where(.svelte-8ukb9p) {
    margin: 0;
    color: #6b7280;
    font-size: 0.875rem;
  }

  .users-manager.svelte-1vb0dnd {
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
  }

  .page-header.svelte-1vb0dnd {
    margin-bottom: 2rem;
  }

  .page-header.svelte-1vb0dnd h1:where(.svelte-1vb0dnd) {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: #1f2937;
  }

  .subtitle.svelte-1vb0dnd {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
  }

  .loading.svelte-1vb0dnd {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
  }

  .users-list.svelte-1vb0dnd {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
  }

  .user-card.svelte-1vb0dnd {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .user-card.inactive.svelte-1vb0dnd {
    opacity: 0.6;
  }

  .user-avatar.svelte-1vb0dnd {
    flex-shrink: 0;
  }

  .user-avatar.svelte-1vb0dnd img:where(.svelte-1vb0dnd),
  .avatar-placeholder.svelte-1vb0dnd {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
  }

  .avatar-placeholder.svelte-1vb0dnd {
    background: #113783;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
  }

  .user-info.svelte-1vb0dnd {
    flex: 1;
  }

  .user-info.svelte-1vb0dnd h3:where(.svelte-1vb0dnd) {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    color: #1f2937;
  }

  .user-email.svelte-1vb0dnd {
    margin: 0 0 0.5rem 0;
    color: #6b7280;
    font-size: 0.95rem;
  }

  .user-meta.svelte-1vb0dnd {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #9ca3af;
  }

  .user-role.svelte-1vb0dnd {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .user-role.svelte-1vb0dnd label:where(.svelte-1vb0dnd) {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 600;
  }

  .user-role.svelte-1vb0dnd select:where(.svelte-1vb0dnd) {
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
  }

  .user-role.svelte-1vb0dnd select:where(.svelte-1vb0dnd):disabled {
    background: #f3f4f6;
    cursor: not-allowed;
  }

  .user-actions.svelte-1vb0dnd {
    display: flex;
    gap: 0.5rem;
  }

  .btn-action.svelte-1vb0dnd {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.2s;
    background: #f3f4f6;
  }

  .btn-action.svelte-1vb0dnd:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .btn-action.svelte-1vb0dnd:hover:not(:disabled) {
    background: #e5e7eb;
  }

  .btn-danger.svelte-1vb0dnd:hover:not(:disabled) {
    background: #fee2e2;
  }

  .roles-info.svelte-1vb0dnd {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .roles-info.svelte-1vb0dnd h3:where(.svelte-1vb0dnd) {
    margin: 0 0 1.5rem 0;
    color: #1f2937;
  }

  .roles-grid.svelte-1vb0dnd {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
  }

  .role-card.svelte-1vb0dnd {
    background: #f9fafb;
    border-radius: 8px;
    padding: 1.5rem;
  }

  .role-card.svelte-1vb0dnd h4:where(.svelte-1vb0dnd) {
    margin: 0 0 1rem 0;
    color: #1f2937;
    font-size: 1.1rem;
  }

  .role-card.svelte-1vb0dnd ul:where(.svelte-1vb0dnd) {
    margin: 0;
    padding-left: 1.25rem;
    color: #6b7280;
  }

  .role-card.svelte-1vb0dnd li:where(.svelte-1vb0dnd) {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
  }

  body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #f5f7fa;
  }

  .loading-screen.svelte-1n46o8q {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f5f7fa;
  }

  .spinner.svelte-1n46o8q {
    width: 50px;
    height: 50px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #113783;
    border-radius: 50%;
    animation: svelte-1n46o8q-spin 1s linear infinite;
    margin-bottom: 1rem;
  }

  @keyframes svelte-1n46o8q-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .loading-screen.svelte-1n46o8q p:where(.svelte-1n46o8q) {
    color: #6b7280;
    font-size: 1.1rem;
  }

  .app.svelte-1n46o8q {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .sidebar.svelte-1n46o8q {
    width: 250px;
    flex-shrink: 0;
    background: #113783;
    color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  }

  .sidebar-header.svelte-1n46o8q {
    padding: 2rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .sidebar-header.svelte-1n46o8q h1:where(.svelte-1n46o8q) {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
  }

  .subtitle.svelte-1n46o8q {
    margin: 0.5rem 0 0 0;
    font-size: 0.85rem;
    opacity: 0.8;
  }

  .sidebar-nav.svelte-1n46o8q {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
  }

  .nav-item.svelte-1n46o8q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 1rem;
    text-align: left;
  }

  .nav-item.svelte-1n46o8q:hover {
    background: rgba(255,255,255,0.1);
  }

  .nav-item.active.svelte-1n46o8q {
    background: rgba(255,255,255,0.2);
    border-left: 3px solid white;
  }

  .icon.svelte-1n46o8q {
    font-size: 1.2rem;
  }

  .sidebar-footer.svelte-1n46o8q {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1rem;
  }

  .user-menu.svelte-1n46o8q {
    position: relative;
  }

  .user-button.svelte-1n46o8q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
  }

  .user-button.svelte-1n46o8q:hover {
    background: rgba(255,255,255,0.15);
  }

  .user-avatar.svelte-1n46o8q {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .user-avatar-placeholder.svelte-1n46o8q {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    color: #113783;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
  }

  .user-info.svelte-1n46o8q {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .user-name.svelte-1n46o8q {
    font-weight: 600;
    font-size: 0.95rem;
  }

  .user-role.svelte-1n46o8q {
    font-size: 0.75rem;
    opacity: 0.8;
    text-transform: capitalize;
  }

  .user-dropdown.svelte-1n46o8q {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
    margin-bottom: 0.5rem;
    overflow: hidden;
  }

  .dropdown-item.svelte-1n46o8q {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .dropdown-label.svelte-1n46o8q {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 600;
  }

  .dropdown-value.svelte-1n46o8q {
    font-size: 0.9rem;
    color: #1f2937;
  }

  .role-badge.svelte-1n46o8q {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    width: fit-content;
  }

  .role-admin.svelte-1n46o8q {
    background: #fee2e2;
    color: #dc2626;
  }

  .role-manager.svelte-1n46o8q {
    background: #dbeafe;
    color: #2563eb;
  }

  .role-viewer.svelte-1n46o8q {
    background: #f3f4f6;
    color: #6b7280;
  }

  .dropdown-button.svelte-1n46o8q {
    width: 100%;
    padding: 0.875rem 1rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s;
  }

  .dropdown-button.svelte-1n46o8q:hover {
    background: #f3f4f6;
  }

  .dropdown-button.logout.svelte-1n46o8q {
    color: #dc2626;
    font-weight: 600;
  }

  .dropdown-button.logout.svelte-1n46o8q:hover {
    background: #fee2e2;
  }

  .main-content.svelte-1n46o8q {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f5f7fa;
  }

  .coming-soon.svelte-1n46o8q {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #6b7280;
  }

  .coming-soon.svelte-1n46o8q h2:where(.svelte-1n46o8q) {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .coming-soon.svelte-1n46o8q p:where(.svelte-1n46o8q) {
    font-size: 1.1rem;
  }