:root {
            --primary: #050816;
            --secondary: #0b1220;
            --card: rgba(15, 23, 42, 0.92);
            --card-soft: rgba(15, 23, 42, 0.75);
            --border-soft: rgba(148, 163, 184, 0.35);
            --border-strong: rgba(248, 250, 252, 0.12);
            --accent: #fbbf24;
            --accent-soft: rgba(251, 191, 36, 0.2);
            --accent-strong: rgba(251, 191, 36, 0.9);
            --text-main: #e5e7eb;
            --text-soft: #9ca3af;
            --success: #22c55e;
            --warning: #eab308;
            --danger: #ef4444;
            --info: #0ea5e9;
            --radius-lg: 20px;
            --radius-md: 14px;
            --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.85);
        }

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

        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background:
                radial-gradient(circle at top, rgba(251, 191, 36, 0.14), transparent 55%),
                radial-gradient(circle at bottom, rgba(56, 189, 248, 0.18), transparent 60%),
                linear-gradient(135deg, var(--primary), var(--secondary));
            color: var(--text-main);
            min-height: 100vh;
            padding: 18px;
        }

        .app-shell { max-width: 1280px; margin: 0 auto 24px auto; }

        .app-header {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.96));
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-strong);
            box-shadow: var(--shadow-soft);
            padding: 18px 20px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            position: relative;
            overflow: hidden;
        }

        .app-header::before {
            content: "";
            position: absolute;
            inset: -40%;
            background:
                radial-gradient(circle at 0% 0%, rgba(251, 191, 36, 0.18), transparent 60%),
                radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.18), transparent 60%);
            opacity: 0.3;
            pointer-events: none;
        }

        .app-header-main { position: relative; z-index: 1; }

        .app-title {
            font-size: 1.55rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .app-title span.logo-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 999px;
            background: radial-gradient(circle at 30% 0%, #fef9c3, #fbbf24);
            color: #1f2933;
            font-size: 0.9rem;
            box-shadow: 0 8px 18px rgba(251, 191, 36, 0.55);
        }

        .app-subtitle { margin-top: 3px; font-size: 0.85rem; color: var(--text-soft); }
        .app-subtitle strong { color: #fef9c3; font-weight: 500; }

        .app-header-stats {
            position: relative;
            z-index: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-end;
            align-items: center;
        }

        .metric-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 11px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.4);
            background: radial-gradient(circle at 0 0, rgba(148, 163, 184, 0.2), transparent 55%);
            font-size: 0.78rem;
            color: var(--text-soft);
            backdrop-filter: blur(16px);
        }

        .metric-pill span.dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: #22c55e;
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
        }

        .metric-pill strong { color: #e5e7eb; font-weight: 600; }

        .metric-pill.accent {
            border-color: rgba(251, 191, 36, 0.7);
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(30, 64, 175, 0.3));
            color: #fefce8;
        }

        .app-main-card {
            margin-top: 18px;
            padding: 18px 18px 22px 18px;
            background: linear-gradient(145deg, var(--card), rgba(15, 23, 42, 0.96));
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-strong);
            box-shadow: var(--shadow-soft);
        }

        .section-title {
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-soft);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-title span.bar {
            display: inline-block;
            width: 32px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--accent), transparent);
        }

        .instructions {
            background: radial-gradient(circle at 0 0, rgba(251, 191, 36, 0.23), rgba(15, 23, 42, 0.96));
            border-radius: var(--radius-md);
            border: 1px solid rgba(251, 191, 36, 0.4);
            padding: 14px 14px 13px 14px;
            margin-bottom: 20px;
            font-size: 0.9rem;
        }

        .instructions strong { color: #fef9c3; font-weight: 600; }

        .instructions-list { margin-top: 7px; text-align: left; display: inline-block; }
        .instructions-list span.step { display: block; color: #e5e7eb; margin-bottom: 2px; }
        .instructions-list span.step-number { color: var(--accent); font-weight: 600; margin-right: 4px; }

        .qr-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 18px;
            margin-top: 6px;
        }

        .qr-card {
            position: relative;
            background: linear-gradient(150deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.75));
            border-radius: 18px;
            padding: 16px 15px 15px 15px;
            border: 1px solid rgba(148, 163, 184, 0.55);
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.9);
            overflow: hidden;
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
        }

        .qr-card::before {
            content: "";
            position: absolute;
            inset: -40%;
            background:
                radial-gradient(circle at 0 0, rgba(251, 191, 36, 0.18), transparent 60%),
                radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.16), transparent 55%);
            opacity: 0.22;
            pointer-events: none;
        }

        .qr-card:hover {
            transform: translateY(-4px) translateZ(0);
            border-color: rgba(251, 191, 36, 0.75);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95);
            background: linear-gradient(150deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.92));
        }

        .qr-card-content { position: relative; z-index: 1; }

        .employee-name { font-size: 1.02rem; font-weight: 650; color: #fefce8; margin-bottom: 3px; }
        .employee-role { font-size: 0.78rem; color: var(--text-soft); margin-bottom: 8px; }

        .employee-info {
            background: rgba(15, 23, 42, 0.9);
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.55);
            padding: 8px 9px;
            margin-bottom: 10px;
            font-size: 0.8rem;
        }

        .employee-info-row {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 3px;
        }

        .employee-info-row:last-child { margin-bottom: 0; }
        .employee-info-label { color: var(--text-soft); }
        .employee-info-value { color: #e5e7eb; font-weight: 500; }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 9px;
            border-radius: 999px;
            font-size: 0.72rem;
            border: 1px solid rgba(251, 191, 36, 0.7);
            background: radial-gradient(circle at 0 0, rgba(251, 191, 36, 0.24), transparent 60%);
            color: #fef9c3;
            margin-top: 4px;
        }

        .status-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: rgba(251, 191, 36, 1);
            box-shadow: 0 0 8px rgba(251, 191, 36, 0.9);
        }

        .qr-container {
            margin: 10px 0;
            padding: 10px;
            background: #f9fafb;
            border-radius: 14px;
            border: 2px solid rgba(15, 23, 42, 0.95);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .qr-image {
            width: 168px;
            height: 168px;
            border-radius: 9px;
            border: 2px solid rgba(15, 23, 42, 0.9);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 14px;
            background: linear-gradient(135deg, var(--accent-strong), #facc15);
            color: #111827;
            border-radius: 999px;
            font-weight: 600;
            font-size: 0.8rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            white-space: nowrap;
            transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
            box-shadow: 0 10px 25px rgba(251, 191, 36, 0.5);
        }

        .btn:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 14px 30px rgba(251, 191, 36, 0.6); }
        .btn:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.9); }

        .btn.back-btn {
            background: linear-gradient(135deg, #4b5563, #6b7280);
            color: #f9fafb;
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.7);
        }

        .btn.green-btn {
            background: linear-gradient(135deg, #22c55e, #4ade80);
            color: #022c22;
            box-shadow: 0 12px 30px rgba(34, 197, 94, 0.45);
        }

        .btn.purple-btn {
            background: linear-gradient(135deg, #8b5cf6, #a855f7);
            color: #f9fafb;
            box-shadow: 0 12px 30px rgba(129, 140, 248, 0.5);
        }

        .btn.red-btn {
            background: linear-gradient(135deg, #ef4444, #fb7185);
            color: #f9fafb;
            box-shadow: 0 12px 30px rgba(248, 113, 113, 0.5);
        }

        .btn.blue-btn {
            background: linear-gradient(135deg, #0ea5e9, #38bdf8);
            color: #0b1120;
            box-shadow: 0 12px 30px rgba(56, 189, 248, 0.5);
        }

        .button-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-top: 8px;
        }

        .error-message, .success-message {
            border-radius: 14px;
            padding: 10px 12px;
            margin-bottom: 12px;
            font-size: 0.86rem;
            border-width: 1px;
            border-style: solid;
        }

        .error-message {
            background: rgba(239, 68, 68, 0.08);
            border-color: rgba(248, 113, 113, 0.6);
            color: #fecaca;
        }

        .success-message {
            background: rgba(34, 197, 94, 0.08);
            border-color: rgba(74, 222, 128, 0.6);
            color: #bbf7d0;
        }

        .footer-actions {
            margin-top: 20px;
            padding-top: 14px;
            border-top: 1px dashed rgba(148, 163, 184, 0.4);
            text-align: center;
        }

        .admin-panel {
          margin-top: 14px;
          padding: 14px;
          border-radius: 18px;
          border: 1px solid rgba(251, 191, 36, 0.3);
          background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.98));
          box-shadow: 0 16px 34px rgba(15, 23, 42, 0.35);
        }

        .admin-panel-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          flex-wrap: wrap;
          margin-bottom: 10px;
          color: #f8fafc;
          font-weight: 700;
        }

        .admin-panel-subtitle {
          color: #cbd5e1;
          font-size: 0.82rem;
          line-height: 1.4;
          margin-bottom: 12px;
        }

        .admin-form-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
        }

        .admin-field {
          display: flex;
          flex-direction: column;
          gap: 5px;
          font-size: 0.8rem;
          color: #e5e7eb;
        }

        .admin-field input {
          width: 100%;
          border-radius: 12px;
          border: 1px solid rgba(148, 163, 184, 0.35);
          background: rgba(15, 23, 42, 0.9);
          color: #f8fafc;
          padding: 10px 12px;
          outline: none;
        }

        .admin-field input::placeholder { color: #94a3b8; }

        .admin-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 12px;
          justify-content: flex-end;
        }

        .inline-form { margin: 0; }

        .employee-edit-form {
          margin: 10px 0 12px 0;
          padding: 10px;
          border-radius: 14px;
          border: 1px solid rgba(148, 163, 184, 0.28);
          background: rgba(2, 6, 23, 0.55);
          display: grid;
          gap: 8px;
        }

        .employee-edit-form .admin-field input {
          font-size: 0.86rem;
          padding: 8px 10px;
        }

        .connection-info {
            margin-top: 14px;
            padding: 10px 12px;
            border-radius: 14px;
            background: rgba(15, 23, 42, 0.95);
            border: 1px solid rgba(148, 163, 184, 0.5);
            font-size: 0.78rem;
            color: var(--text-soft);
            text-align: center;
        }

        .connection-info strong { color: #e5e7eb; }

        .connection-info code {
            background: rgba(15, 23, 42, 0.9);
            padding: 2px 6px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.6);
            font-size: 0.75rem;
            color: #e5e7eb;
            display: inline-block;
            margin: 1px 0;
        }

        .last-activity { margin-top: 6px; font-size: 0.78rem; color: var(--text-soft); }

        @media (max-width: 900px) {
            body { padding: 14px; }
            .app-header { padding: 14px 15px; }
            .app-title { font-size: 1.3rem; }
            .app-main-card { padding: 14px 14px 18px 14px; }
            .qr-grid { grid-template-columns: 1fr; }
            .qr-image { width: 150px; height: 150px; }
        }

        @media (max-width: 600px) {
            .app-header { flex-direction: column; align-items: flex-start; }
            .app-header-stats { width: 100%; justify-content: flex-start; }
            .button-group { flex-direction: column; }
            .button-group .btn { width: 100%; }
          .admin-form-grid { grid-template-columns: 1fr; }
        }

        /* GLOBAL-STYLE-START */
        .global-app-shell{ max-width:1280px; margin:0 auto 16px auto; padding:0 0; }
        .global-app-header{
          background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.96));
          border-radius: 22px;
          border: 1px solid rgba(248,250,252,0.12);
          box-shadow: 0 18px 45px rgba(15,23,42,0.85);
          padding: 18px 20px;
          display:flex;
          align-items:center;
          justify-content:space-between;
          gap:16px;
          position:relative;
          overflow:hidden;
        }
        .global-app-header::before{
          content:"";
          position:absolute;
          inset:-40%;
          background:
            radial-gradient(circle at 0% 0%, rgba(251,191,36,0.18), transparent 60%),
            radial-gradient(circle at 100% 0%, rgba(56,189,248,0.18), transparent 60%);
          opacity:0.22;
          pointer-events:none;
        }
        .global-app-left{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
        .global-app-text{ display:flex; flex-direction:column; gap:2px; }
        .global-app-title{ font-size:1.25rem; font-weight:750; color:#e5e7eb; letter-spacing:0.02em; }
        .global-app-subtitle{ font-size:0.9rem; color:rgba(229,231,235,0.72); }

        .global-logo-badge{
          width:72px !important;
          height:72px !important;
          border-radius:18px !important;
          background: transparent !important;
          background-image: none !important;
          box-shadow: none !important;
          border: 1px solid rgba(148,163,184,0.35) !important;
          overflow:hidden !important;
          padding:0 !important;
          display:flex !important;
          align-items:center !important;
          justify-content:center !important;
          position:relative;
          z-index:1;
        }
        .global-logo-badge img{
          width:100% !important;
          height:100% !important;
          object-fit: contain !important;
          display:block !important;
          background: transparent !important;
        }

        .global-app-right{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; }
        .global-pill-link{
          display:inline-flex;
          align-items:center;
          justify-content:center;
          padding:8px 14px;
          border-radius:999px;
          border:1px solid rgba(148,163,184,0.45);
          background: rgba(15,23,42,0.35);
          color:#e5e7eb;
          text-decoration:none;
          font-weight:600;
          font-size:0.85rem;
          backdrop-filter: blur(14px);
        }
        .global-pill-link:hover{ border-color: rgba(251,191,36,0.65); }

        @media (max-width: 700px){
          .global-app-header{ flex-direction:column; align-items:flex-start; }
          .global-app-right{ width:100%; }
        }
        /* GLOBAL-STYLE-END */

        /* QR-LOGO-OVERRIDE-START */
        .app-title span.logo-pill{
          width:72px !important;
          height:72px !important;
          border-radius:18px !important;
          background: transparent !important;
          background-image: none !important;
          box-shadow: none !important;
          border: 1px solid rgba(148,163,184,0.35) !important;
          overflow: hidden !important;
          padding: 0 !important;
        }
        .app-title span.logo-pill img{
          width:100% !important;
          height:100% !important;
          object-fit: contain !important;
          display:block !important;
          background: transparent !important;
        }
        /* QR-LOGO-OVERRIDE-END */

        /* GLOBAL-LOGO-OVERRIDE-START */
        .global-logo-badge,
        .logo-badge,
        .logo-pill,
        .app-title .logo-pill,
        .header .logo .logo-badge,
        .app-header .app-title .logo-pill{
          width:72px !important;
          height:72px !important;
          border-radius:18px !important;
          background: transparent !important;
          background-image: none !important;
          box-shadow: none !important;
          border: 1px solid rgba(148,163,184,0.35) !important;
          overflow: hidden !important;
          padding: 0 !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
        }

        .global-logo-badge img,
        .logo-badge img,
        .logo-pill img,
        .app-title .logo-pill img,
        .header .logo .logo-badge img,
        .app-header .app-title .logo-pill img{
          width:100% !important;
          height:100% !important;
          object-fit: contain !important;
          display:block !important;
          background: transparent !important;
        }
        /* GLOBAL-LOGO-OVERRIDE-END */
    

      :root{ --irLogoSize:72px; }

      .logo-badge, .logo-pill{
        width:var(--irLogoSize) !important;
        height:var(--irLogoSize) !important;
        border-radius:18px !important;
        background:transparent !important;
        background-image:none !important;
        box-shadow:none !important;
        overflow:hidden !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        border:1px solid rgba(148,163,184,0.35) !important;
      }
      .logo-badge img, .logo-pill img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        display:block !important;
        background:transparent !important;
      }

      img[src*="nachgpt-logo.png"]{
        max-width:var(--irLogoSize) !important;
        max-height:var(--irLogoSize) !important;
        width:var(--irLogoSize) !important;
        height:var(--irLogoSize) !important;
        object-fit:contain !important;
      }
    

    .global-app-shell{ display:none !important; }

    a.global-pill-link,
    .global-app-right,
    .global-app-right a,
    .global-app-right button{
      display:none !important;
    }

    .app-shell{
      max-width:1280px;
      margin:0 auto;
    }

    .app-header{
      max-width:1280px;
      margin:0 auto 16px auto;
      display:flex !important;
      flex-direction:column !important;
      align-items:center !important;
      text-align:center !important;
    }

    .app-header-main{
      width:100% !important;
      display:flex !important;
      flex-direction:column !important;
      align-items:center !important;
      text-align:center !important;
    }

    .app-title{
      justify-content:center !important;
      align-items:center !important;
      text-align:center !important;
    }

    .app-header-stats{
      width:100% !important;
      display:flex !important;
      justify-content:center !important;
      flex-wrap:wrap !important;
      gap:10px !important;
      margin-top:10px !important;
    }
    

@media (max-width: 700px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding: 8px !important;
  }

  .app-shell,
  .app-header,
  .app-main-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .app-header {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .app-title {
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .app-subtitle {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  .app-main-card {
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .instructions {
    padding: 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }

  .instructions-list {
    width: 100% !important;
  }

  .qr-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .qr-card {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .employee-name {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
  }

  .employee-role,
  .employee-info,
  .last-activity,
  .connection-info {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  .employee-info-row {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }

  .qr-container {
    width: 100% !important;
    padding: 8px !important;
    margin: 8px 0 !important;
  }

  .qr-image {
    width: min(62vw, 220px) !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .button-group {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .button-group .btn,
  .footer-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.85rem !important;
  }

  .connection-info code {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
}