*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: Onest, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f4f8; min-height: 100vh; padding: 20px 16px 40px; line-height: 1.6; color: #1a1a1a; }
    .admin-container { width: 100%; max-width: 860px; margin: 0 auto; }
    .admin-card { background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.10); padding: 32px; margin-bottom: 20px; }
    .admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid #f0f4f8; }
    .admin-title { font-size: 22px; font-weight: 700; } .admin-title span { color: #2aa6fb; }
    .admin-user { font-size: 13px; color: #888; }
    .btn-logout { background: none; border: 1px solid #e1e5e9; border-radius: 8px; padding: 6px 14px; font-size: 13px; color: #555; cursor: pointer; font-family: inherit; }
    .btn-logout:hover { background: #f0f4f8; }
    .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
    .login-card { background: #fff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.10); padding: 40px 36px; width: 100%; max-width: 400px; }
    .login-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; } .login-subtitle { font-size: 13px; color: #888; margin-bottom: 28px; }
    .form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
    .form-label { font-weight: 500; color: #333; font-size: 13px; } .form-label .req { color: #e05; margin-left: 2px; }
    .form-input, .form-textarea { width: 100%; padding: 11px 13px; border: 2px solid #e1e5e9; border-radius: 10px; font-size: 14px; font-family: inherit; color: #1a1a1a; background: #fff; transition: border-color .2s; outline: none; }
    .form-input:focus, .form-textarea:focus { border-color: #2aa6fb; }
    .form-input:disabled { background: #f7f9fb; color: #888; cursor: not-allowed; }
    .form-hint { font-size: 12px; color: #888; margin-top: 3px; } .form-hint.warning { color: #d97706; }
    .toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .toggle-label { font-size: 14px; font-weight: 500; color: #333; cursor: pointer; }
    .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider { position: absolute; cursor: pointer; top:0; left:0; right:0; bottom:0; background: #e1e5e9; border-radius: 24px; transition: .2s; }
    .toggle-slider::before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.2s; }
    .toggle-switch input:checked + .toggle-slider { background: #2aa6fb; }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
    .btn { padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: all .2s; }
    .btn-primary { background: #2aa6fb; color: #fff; } .btn-primary:hover { background: #1a96eb; } .btn-primary:disabled { opacity:.5; cursor:not-allowed; }
    .btn-secondary { background: #f0f4f8; color: #333; } .btn-secondary:hover { background: #e1e5e9; }
    .btn-sm { padding: 6px 14px; font-size: 13px; }
    .btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
    .alert { border-radius: 10px; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; }
    .alert-error { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
    .alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
    .badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
    .badge-active { background: #dcfce7; color: #166534; } .badge-inactive { background: #f1f5f9; color: #64748b; }
    .badge-submitted { background: #fef9c3; color: #854d0e; } .badge-sent { background: #dcfce7; color: #166534; } .badge-failed { background: #fee2e2; color: #b91c1c; } .badge-open { background: #fef9c3; color: #854d0e; } .badge-confirmed { background: #dcfce7; color: #166534; } .badge-declined { background: #fee2e2; color: #b91c1c; } .badge-need-info { background: #fef9c3; color: #92400e; }
    .provider-list { display: flex; flex-direction: column; gap: 12px; }
    .provider-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border: 2px solid #e1e5e9; border-radius: 12px; transition: border-color .2s, box-shadow .2s; gap: 12px; }
    .provider-item:hover { border-color: #2aa6fb; box-shadow: 0 2px 12px rgba(42,166,251,.08); }
    .provider-item-info { flex: 1; min-width: 0; }
    .provider-item-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .provider-item-meta { font-size: 12px; color: #888; margin-top: 2px; }
    .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
    .section-title { font-size: 17px; font-weight: 700; } .section-sub { font-size: 13px; color: #888; margin-top: 2px; }
    .tariff-section { border: 2px solid #e1e5e9; border-radius: 12px; padding: 18px; margin-bottom: 14px; }
    .tariff-section-title { font-size: 13px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
    .tariff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
    @media (max-width: 540px) { .tariff-grid { grid-template-columns: 1fr; } }
    .ddr-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; font-size: 13px; color: #92400e; }
    .ddr-box strong { display: block; margin-bottom: 4px; }
    .link-box { display: flex; align-items: center; gap: 8px; background: #f7f9fb; border: 2px solid #e1e5e9; border-radius: 10px; padding: 10px 14px; margin-top: 8px; }
    .link-url { flex: 1; font-size: 13px; color: #2aa6fb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: monospace; }
    .btn-copy { background: #e0f2fe; border: none; border-radius: 7px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: #0369a1; cursor: pointer; font-family: inherit; }
    .btn-copy:hover { background: #bae6fd; }
    .request-list { display: flex; flex-direction: column; gap: 10px; }
    .request-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid #e1e5e9; border-radius: 10px; gap: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
    .request-item:hover { border-color: #2aa6fb; background: #f7fbff; }
    .request-item-info { flex: 1; min-width: 0; }
    .request-item-route { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .request-item-meta { font-size: 12px; color: #888; margin-top: 2px; }
    .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
    @media (max-width: 540px) { .detail-grid { grid-template-columns: 1fr; } }
    .detail-field { margin-bottom: 14px; }
    .detail-label { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
    .detail-value { font-size: 14px; color: #1a1a1a; word-break: break-word; }
    .detail-value.mono { font-family: monospace; font-size: 13px; }
    .detail-section { border: 1px solid #e1e5e9; border-radius: 10px; padding: 16px; margin-bottom: 14px; }
    .detail-section-title { font-size: 12px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
    .readonly-notice { background: #f0f4f8; border: 1px solid #e1e5e9; border-radius: 8px; padding: 8px 14px; font-size: 12px; color: #555; margin-bottom: 16px; }
    .filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
    .filter-btn { padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1.5px solid #e1e5e9; background: #fff; color: #555; cursor: pointer; font-family: inherit; transition: all .15s; }
    .filter-btn.active { border-color: #2aa6fb; background: #e0f2fe; color: #0369a1; }
    .filter-btn:hover:not(.active) { border-color: #2aa6fb; }
    .empty-state { text-align: center; padding: 40px 20px; color: #888; }
    .empty-state-icon { font-size: 36px; margin-bottom: 12px; } .empty-state-msg { font-size: 15px; }
    .spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid #e1e5e9; border-top-color: #2aa6fb; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 6px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .hidden { display: none !important; }

    .link-label { font-size: 12px; color: #666; margin-bottom: 4px; }

    .btn-danger { background: #dc2626; color: #fff; }
    .btn-danger:hover { background: #b91c1c; }
    .btn-danger:disabled { opacity:.5; cursor:not-allowed; }
    .danger-box { background: #fff7ed; border: 1px solid #fdba74; border-radius: 12px; padding: 16px; }
    .danger-title { font-size: 13px; font-weight: 700; color: #9a3412; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
    .danger-copy { font-size: 13px; color: #7c2d12; margin-bottom: 12px; }
    .danger-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

    /* ── Admin nav tabs (Systemstatus) ────────────────────────────────────── */
    .admin-nav { display: flex; gap: 4px; }
    .admin-nav-btn { background: none; border: none; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; color: #555; transition: all .15s; }
    .admin-nav-btn:hover { background: #f0f4f8; color: #1a1a1a; }
    .admin-nav-btn.active { background: #e0f2fe; color: #0369a1; }

    /* ── Health status banner ──────────────────────────────────────────────── */
    .health-banner { border-radius: 10px; padding: 14px 18px; font-size: 15px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
    .health-banner-loading { background: #f0f4f8; color: #555; }
    .health-banner-ok      { background: #dcfce7; color: #166534; }
    .health-banner-warn    { background: #fef9c3; color: #854d0e; }
    .health-banner-fail    { background: #fee2e2; color: #b91c1c; }

    /* ── Health metrics grid ───────────────────────────────────────────────── */
    .health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
    @media (max-width: 640px) { .health-grid { grid-template-columns: 1fr 1fr; } }
    .health-metric { background: #f7f9fb; border: 1px solid #e1e5e9; border-radius: 10px; padding: 12px 14px; }
    .health-metric-label { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
    .health-metric-value { font-size: 18px; font-weight: 700; color: #1a1a1a; }
    .health-metric-value.ok   { color: #166534; }
    .health-metric-value.warn { color: #d97706; }
    .health-metric-value.fail { color: #b91c1c; }

    /* ── Health check rows ─────────────────────────────────────────────────── */
    .health-check-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f4f8; font-size: 13px; }
    .health-check-row:last-child { border-bottom: none; }
    .health-check-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
    .health-check-name { font-weight: 600; color: #333; min-width: 220px; }
    .health-check-msg  { color: #555; flex: 1; }
    .health-check-ok   .health-check-icon::before { content: '✓'; color: #166534; }
    .health-check-warn .health-check-icon::before { content: '⚠'; color: #d97706; }
    .health-check-fail .health-check-icon::before { content: '✗'; color: #b91c1c; }

    /* ── Mobile responsive improvements ≤540px ────────────────────────────── */
    @media (max-width: 540px) {

      /* Reduce card horizontal padding — 32px is too wide on a 375px phone */
      .admin-card { padding: 20px 16px; }

      /* Header card: allow title + logout to breathe */
      .admin-header { gap: 10px; }
      .admin-user { display: none; }  /* email label drops off — not critical on mobile */

      /* Section head: allow title + button to wrap if needed */
      .section-head { flex-wrap: wrap; gap: 8px; }

      /* Provider list cards: stack info above actions */
      .provider-item {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 14px 14px;
        gap: 8px;
      }

      /* Info block takes full width on mobile */
      .provider-item-info {
        width: 100%;
        min-width: 0;
        flex: none;
      }

      /* Meta line: allow wrapping, slightly smaller */
      .provider-item-meta {
        font-size: 11px;
        white-space: normal;
        word-break: break-word;
      }

      /* Actions div: wrap to new row, allow buttons to flow */
      .provider-item > div:last-child {
        width: 100%;
        flex-shrink: 1 !important;
        flex-wrap: wrap;
        gap: 6px;
      }

      /* Slightly compact btn-sm on mobile for better button row density */
      .btn-sm { padding: 7px 12px; font-size: 12px; }

      /* Nav tabs: reduce padding on very narrow screens */
      .admin-nav-btn { padding: 7px 12px; font-size: 13px; }

      /* Health metrics: preserve card structure, only minor padding reduction */
      .health-metric { padding: 10px 12px; }
      /* health-metric-value font-size intentionally NOT reduced — keep readable */

      /* Health check rows: allow name to shrink on mobile, message wraps below */
      .health-check-name { min-width: 0; flex: 0 0 auto; max-width: 100%; }
      .health-check-row  { flex-wrap: wrap; }
      .health-check-msg  { flex-basis: 100%; }

      /* Filter bar: already wraps, just ensure consistent gap */
      .filter-bar { gap: 6px; }
    }

    @media (max-width: 380px) {
      /* Very small phones: single-column health grid */
      .health-grid { grid-template-columns: 1fr; }
    }