/* Shared styles for welcome + user login + admin login */

/* Admin auth page */
:root {
         --auth-bg: #edf2fa;
         --auth-text: #0f1f33;
         --auth-muted: #5d7089;
         --auth-primary: #1d4ed8;
         --auth-primary-strong: #1e3a8a;
         --auth-accent: #f59e0b;
         --auth-card: #ffffff;
         --auth-border: #d4deec;
         --auth-shadow: 0 26px 48px rgba(15, 23, 42, 0.14);
      }

      html,
      body {
         min-height: 100%;
      }

      body.login.admin-login {
         margin: 0;
         font-family: "Poppins", sans-serif;
         color: var(--auth-text);
         background: radial-gradient(circle at 20% 20%, #dbeafe 0%, transparent 45%),
                     radial-gradient(circle at 85% 15%, #fef3c7 0%, transparent 35%),
                     var(--auth-bg);
      }

      .auth-shell {
         min-height: 100vh;
         display: grid;
         grid-template-columns: 1.08fr 1fr;
      }

      .auth-brand-panel {
         position: relative;
         overflow: hidden;
         background: linear-gradient(145deg, #1e3a8a 0%, #1d4ed8 52%, #0b1739 100%);
         padding: 64px 56px;
         display: flex;
         align-items: center;
      }

      .auth-brand-panel::before,
      .auth-brand-panel::after {
         content: "";
         position: absolute;
         border-radius: 999px;
         pointer-events: none;
      }

      .auth-brand-panel::before {
         width: 360px;
         height: 360px;
         background: rgba(255, 255, 255, 0.08);
         top: -140px;
         right: -90px;
      }

      .auth-brand-panel::after {
         width: 260px;
         height: 260px;
         background: rgba(245, 158, 11, 0.24);
         bottom: -90px;
         left: -70px;
      }

      .auth-brand-content {
         max-width: 560px;
         position: relative;
         z-index: 2;
         color: #ffffff;
      }

      .auth-kicker {
         margin-bottom: 12px;
         letter-spacing: 0.18em;
         font-size: 12px;
         font-weight: 600;
         text-transform: uppercase;
         opacity: 0.92;
      }

      .auth-title {
         font-family: "Manrope", sans-serif;
         margin: 0;
         font-size: clamp(32px, 4vw, 50px);
         line-height: 1.06;
         font-weight: 800;
      }

      .auth-subtitle {
         margin: 18px 0 34px;
         max-width: 440px;
         line-height: 1.7;
         font-size: 15px;
         opacity: 0.9;
      }

      .auth-feature-list {
         display: grid;
         gap: 12px;
      }

      .auth-feature-item {
         display: flex;
         align-items: center;
         gap: 10px;
         font-size: 14px;
      }

      .auth-feature-dot {
         width: 9px;
         height: 9px;
         border-radius: 999px;
         background: var(--auth-accent);
         box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.2);
      }

      .auth-form-panel {
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 44px 28px;
      }

      .auth-login-wrap {
         width: 100%;
         max-width: 440px;
      }

      .auth-logo {
         width: 54px;
         height: 54px;
         border-radius: 14px;
         display: grid;
         place-items: center;
         margin: 0 auto 18px;
         background: linear-gradient(145deg, var(--auth-primary), var(--auth-primary-strong));
         color: #ffffff;
         font-size: 24px;
         box-shadow: 0 14px 25px rgba(29, 78, 216, 0.3);
      }

      .auth-card {
         background: var(--auth-card);
         border: 1px solid rgba(15, 23, 42, 0.05);
         border-radius: 20px;
         box-shadow: var(--auth-shadow);
         padding: 30px 24px 24px;
      }

      .auth-card-title {
         margin: 0;
         text-align: center;
         font-family: "Manrope", sans-serif;
         font-size: 27px;
         font-weight: 800;
      }

      .auth-card-subtitle {
         margin: 8px 0 0;
         text-align: center;
         color: var(--auth-muted);
         font-size: 13px;
      }

      .auth-alert {
         margin-top: 16px;
         border-radius: 10px;
         border: 1px solid transparent;
         padding: 10px 12px;
         font-size: 13px;
      }

      .auth-alert-success {
         color: #14532d;
         border-color: #86efac;
         background: #f0fdf4;
      }

      .auth-alert-warning {
         color: #92400e;
         border-color: #fcd34d;
         background: #fffbeb;
      }

      .auth-form {
         margin-top: 18px;
      }

      .auth-field {
         margin-bottom: 14px;
      }

      .auth-field label {
         display: block;
         margin-bottom: 8px;
         font-size: 13px;
         font-weight: 600;
         color: #1f2937;
      }

      .auth-input-wrap {
         position: relative;
      }

      .auth-input-icon {
         position: absolute;
         top: 50%;
         left: 13px;
         transform: translateY(-50%);
         color: #7c8da0;
         font-size: 14px;
         pointer-events: none;
      }

      .auth-input {
         width: 100%;
         border: 1px solid var(--auth-border);
         border-radius: 12px;
         background: #ffffff;
         padding: 11px 42px 11px 38px;
         font-size: 14px;
         line-height: 1.4;
         transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .auth-input:focus {
         outline: none;
         border-color: var(--auth-primary);
         box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.16);
      }

      .auth-password-toggle {
         position: absolute;
         top: 50%;
         right: 11px;
         transform: translateY(-50%);
         border: 0;
         background: transparent;
         color: #7c8da0;
         padding: 4px 5px;
         border-radius: 8px;
         line-height: 1;
      }

      .auth-password-toggle:focus {
         outline: none;
         box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18);
      }

      .auth-error {
         margin: 7px 0 0;
         color: #dc2626;
         font-size: 12px;
      }

      .auth-row {
         margin-top: 4px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
      }

      .auth-checkbox {
         margin: 0;
         display: flex;
         align-items: center;
         gap: 8px;
         font-size: 13px;
         color: #334155;
      }

      .auth-checkbox input {
         width: 16px;
         height: 16px;
         accent-color: var(--auth-primary);
      }

      .auth-link {
         color: var(--auth-primary);
         text-decoration: none;
         font-size: 13px;
         font-weight: 600;
      }

      .auth-link:hover {
         color: var(--auth-primary-strong);
         text-decoration: none;
      }

      .auth-submit {
         width: 100%;
         margin-top: 18px;
         border: 0;
         border-radius: 12px;
         background: linear-gradient(145deg, var(--auth-primary), var(--auth-primary-strong));
         color: #ffffff;
         font-size: 15px;
         font-weight: 700;
         padding: 12px;
         transition: transform 0.2s ease, box-shadow 0.2s ease;
         box-shadow: 0 12px 22px rgba(29, 78, 216, 0.3);
      }

      .auth-submit:hover {
         transform: translateY(-1px);
         box-shadow: 0 16px 24px rgba(29, 78, 216, 0.32);
      }

      .auth-submit:disabled {
         opacity: 0.74;
         box-shadow: none;
         transform: none;
         cursor: not-allowed;
      }

      .auth-footer-note {
         margin-top: 18px;
         text-align: center;
         font-size: 13px;
         color: #64748b;
      }

      .auth-footer-note a {
         color: #1e40af;
         text-decoration: none;
         font-weight: 600;
      }

      .auth-footer-note a:hover {
         text-decoration: underline;
      }

      @media (max-width: 1200px) {
         .auth-shell {
            grid-template-columns: 1fr 1fr;
         }

         .auth-brand-panel {
            padding: 54px 38px;
         }
      }

      @media (max-width: 991.98px) {
         .auth-shell {
            grid-template-columns: 1fr;
         }

         .auth-brand-panel {
            min-height: 220px;
            padding: 38px 24px;
         }

         .auth-feature-list {
            display: none;
         }

         .auth-subtitle {
            margin-bottom: 0;
            max-width: none;
         }

         .auth-form-panel {
            padding: 20px 14px 28px;
            align-items: flex-start;
         }
      }

      @media (max-width: 575.98px) {
         .auth-brand-panel {
            min-height: 180px;
         }

         .auth-kicker {
            font-size: 11px;
         }

         .auth-title {
            font-size: 30px;
         }

         .auth-subtitle {
            font-size: 13px;
            line-height: 1.55;
         }

         .auth-card {
            border-radius: 16px;
            padding: 22px 16px 18px;
         }

         .auth-card-title {
            font-size: 24px;
         }

         .auth-row {
            flex-direction: column;
            align-items: flex-start;
         }

         .auth-submit {
            margin-top: 16px;
         }
      }

/* User auth page */
:root {
         --user-bg: #eef8ff;
         --user-card: #ffffff;
         --user-text: #19324d;
         --user-muted: #5f738a;
         --user-primary: #0ea5a8;
         --user-primary-strong: #0284c7;
         --user-ring: rgba(2, 132, 199, 0.18);
         --user-border: #d8e7f2;
         --user-shadow: 0 20px 45px rgba(24, 78, 119, 0.14);
      }

      html,
      body {
         min-height: 100%;
      }

      body.login.user-login {
         margin: 0;
         font-family: "Nunito", sans-serif;
         color: var(--user-text);
         background: radial-gradient(circle at 82% 18%, #d6f0ff 0%, transparent 40%),
                     radial-gradient(circle at 12% 80%, #dafaf5 0%, transparent 32%),
                     var(--user-bg);
      }

      .user-auth-layout {
         min-height: 100vh;
         display: grid;
         grid-template-columns: 1.12fr 1fr;
      }

      .user-auth-hero {
         position: relative;
         overflow: hidden;
         display: flex;
         align-items: center;
         padding: 54px 50px;
         background: linear-gradient(150deg, #0284c7 0%, #0ea5a8 45%, #155e75 100%);
      }

      .user-auth-hero::before,
      .user-auth-hero::after {
         content: "";
         position: absolute;
         border-radius: 999px;
      }

      .user-auth-hero::before {
         width: 330px;
         height: 330px;
         top: -140px;
         right: -100px;
         background: rgba(255, 255, 255, 0.14);
      }

      .user-auth-hero::after {
         width: 260px;
         height: 260px;
         bottom: -120px;
         left: -80px;
         background: rgba(186, 230, 253, 0.26);
      }

      .user-auth-hero-content {
         position: relative;
         z-index: 2;
         max-width: 530px;
         color: #ffffff;
      }

      .user-auth-eyebrow {
         margin: 0 0 12px;
         text-transform: uppercase;
         letter-spacing: 0.14em;
         font-size: 12px;
         font-weight: 700;
         opacity: 0.95;
      }

      .user-auth-hero-title {
         margin: 0;
         font-family: "Barlow", sans-serif;
         font-size: clamp(34px, 4.2vw, 52px);
         line-height: 1.04;
         font-weight: 800;
      }

      .user-auth-hero-subtitle {
         margin: 18px 0 30px;
         max-width: 420px;
         line-height: 1.7;
         font-size: 15px;
      }

      .user-auth-pills {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
      }

      .user-auth-pill {
         padding: 8px 12px;
         border-radius: 999px;
         background: rgba(255, 255, 255, 0.18);
         border: 1px solid rgba(255, 255, 255, 0.25);
         font-size: 13px;
         font-weight: 700;
      }

      .user-auth-panel {
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 42px 22px;
      }

      .user-login-wrap {
         width: 100%;
         max-width: 430px;
      }

      .user-login-card {
         background: var(--user-card);
         border: 1px solid rgba(7, 89, 133, 0.08);
         border-radius: 22px;
         box-shadow: var(--user-shadow);
         padding: 30px 24px 24px;
      }

      .user-login-logo {
         width: 56px;
         height: 56px;
         margin: 0 auto 14px;
         border-radius: 16px;
         display: grid;
         place-items: center;
         color: #ffffff;
         font-size: 22px;
         background: linear-gradient(145deg, var(--user-primary), var(--user-primary-strong));
         box-shadow: 0 12px 26px rgba(2, 132, 199, 0.3);
      }

      .user-login-title {
         margin: 0;
         text-align: center;
         font-family: "Barlow", sans-serif;
         font-weight: 800;
         font-size: 30px;
      }

      .user-login-subtitle {
         margin: 6px 0 0;
         text-align: center;
         font-size: 13px;
         color: var(--user-muted);
      }

      .user-alert {
         margin-top: 16px;
         padding: 10px 12px;
         border-radius: 10px;
         border: 1px solid transparent;
         font-size: 13px;
      }

      .user-alert-success {
         background: #ecfeff;
         border-color: #67e8f9;
         color: #155e75;
      }

      .user-alert-warning {
         background: #fffbeb;
         border-color: #fcd34d;
         color: #92400e;
      }

      .user-login-form {
         margin-top: 18px;
      }

      .user-form-group {
         margin-bottom: 14px;
      }

      .user-form-group label {
         display: block;
         margin-bottom: 8px;
         font-size: 13px;
         font-weight: 700;
      }

      .user-input-wrap {
         position: relative;
      }

      .user-input-icon {
         position: absolute;
         left: 12px;
         top: 50%;
         transform: translateY(-50%);
         color: #6f87a0;
         font-size: 14px;
      }

      .user-input {
         width: 100%;
         border: 1px solid var(--user-border);
         border-radius: 12px;
         background: #ffffff;
         padding: 11px 42px 11px 38px;
         font-size: 14px;
         transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .user-input:focus {
         outline: none;
         border-color: var(--user-primary-strong);
         box-shadow: 0 0 0 4px var(--user-ring);
      }

      .user-password-toggle {
         position: absolute;
         right: 10px;
         top: 50%;
         transform: translateY(-50%);
         border: 0;
         background: transparent;
         color: #6f87a0;
         border-radius: 8px;
         padding: 4px 6px;
         line-height: 1;
      }

      .user-password-toggle:focus {
         outline: none;
         box-shadow: 0 0 0 3px rgba(14, 165, 168, 0.2);
      }

      .user-field-error {
         margin: 7px 0 0;
         font-size: 12px;
         color: #dc2626;
      }

      .user-login-row {
         margin-top: 6px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 10px;
      }

      .user-check {
         margin: 0;
         display: inline-flex;
         align-items: center;
         gap: 8px;
         font-size: 13px;
         color: #304b66;
      }

      .user-check input {
         width: 16px;
         height: 16px;
         accent-color: var(--user-primary-strong);
      }

      .user-link {
         text-decoration: none;
         color: var(--user-primary-strong);
         font-size: 13px;
         font-weight: 700;
      }

      .user-link:hover {
         text-decoration: none;
         color: #0369a1;
      }

      .user-login-submit {
         width: 100%;
         margin-top: 18px;
         border: 0;
         border-radius: 12px;
         padding: 12px;
         font-size: 15px;
         font-weight: 800;
         color: #ffffff;
         background: linear-gradient(145deg, var(--user-primary), var(--user-primary-strong));
         box-shadow: 0 14px 24px rgba(2, 132, 199, 0.3);
         transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .user-login-submit:hover {
         transform: translateY(-1px);
         box-shadow: 0 16px 26px rgba(2, 132, 199, 0.34);
      }

      .user-login-submit:disabled {
         opacity: 0.72;
         box-shadow: none;
         transform: none;
         cursor: not-allowed;
      }

      .user-login-foot {
         margin: 16px 0 0;
         text-align: center;
         font-size: 13px;
         color: var(--user-muted);
      }

      .user-login-foot a {
         color: #be123c;
         text-decoration: none;
         font-weight: 700;
      }

      .user-login-foot a:hover {
         text-decoration: underline;
      }

      @media (max-width: 1024px) {
         .user-auth-layout {
            grid-template-columns: 1fr;
         }

         .user-auth-hero {
            min-height: 220px;
            padding: 32px 24px;
         }

         .user-auth-pills {
            display: none;
         }

         .user-auth-hero-subtitle {
            margin-bottom: 0;
         }

         .user-auth-panel {
            align-items: flex-start;
            padding: 18px 14px 26px;
         }
      }

      @media (max-width: 575.98px) {
         .user-auth-hero {
            min-height: 176px;
         }

         .user-auth-eyebrow {
            font-size: 11px;
         }

         .user-auth-hero-title {
            font-size: 31px;
         }

         .user-auth-hero-subtitle {
            font-size: 13px;
            line-height: 1.55;
         }

         .user-login-card {
            border-radius: 16px;
            padding: 22px 16px 18px;
         }

         .user-login-title {
            font-size: 26px;
         }

         .user-login-row {
            flex-direction: column;
            align-items: flex-start;
         }
      }

/* Welcome page */
:root {
            --bg-main: #f3f7ff;
            --text-main: #14243d;
            --text-muted: #59708f;
            --line: #d9e3f4;
            --card: #ffffff;
            --employee-a: #0ea5a8;
            --employee-b: #0284c7;
            --admin-a: #1d4ed8;
            --admin-b: #1e3a8a;
            --shadow: 0 22px 40px rgba(15, 23, 42, 0.12);
        }

        * { box-sizing: border-box; }
        html, body { min-height: 100%; }
        html { -webkit-text-size-adjust: 100%; }

        body {
            margin: 0;
            font-family: "Be Vietnam Pro", sans-serif;
            color: var(--text-main);
            background:
                radial-gradient(circle at 12% 16%, #dbeafe 0, transparent 36%),
                radial-gradient(circle at 88% 20%, #d1fae5 0, transparent 34%),
                radial-gradient(circle at 80% 86%, #fef3c7 0, transparent 32%),
                var(--bg-main);
        }

        .welcome-shell {
            min-height: 100vh;
            width: min(1120px, 94vw);
            margin: 0 auto;
            padding: 38px 0 34px;
            display: grid;
            grid-template-rows: auto 1fr auto;
            gap: 26px;
        }

        .brand-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            animation: riseIn 0.55s ease both;
        }

        .brand-chip {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(3px);
            font-size: 13px;
            font-weight: 700;
            color: #1e3a8a;
        }

        .brand-chip i { color: #f59e0b; }

        .hero {
            text-align: left;
            max-width: 880px;
            margin: 0 auto;
            padding: 24px 24px 20px;
            border-radius: 24px;
            border: 1px solid rgba(148, 163, 184, 0.28);
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 100%);
            backdrop-filter: blur(4px);
            box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
            animation: riseIn 0.65s ease both;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: "";
            position: absolute;
            right: -60px;
            top: -56px;
            width: 200px;
            height: 200px;
            border-radius: 999px;
            background: linear-gradient(145deg, rgba(14, 165, 168, 0.24), rgba(37, 99, 235, 0.22));
            pointer-events: none;
        }

        .hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            padding: 7px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #1e3a8a;
            background: rgba(59, 130, 246, 0.12);
            border: 1px solid rgba(59, 130, 246, 0.25);
        }

        .hero h1 {
            margin: 0;
            font-family: "Manrope", sans-serif;
            font-size: clamp(30px, 4.8vw, 50px);
            line-height: 1.22;
            letter-spacing: -0.02em;
            font-weight: 800;
            max-width: 18ch;
        }

        .hero p {
            margin: 14px auto 0;
            color: var(--text-muted);
            font-size: clamp(14px, 2vw, 18px);
            line-height: 1.7;
            max-width: 640px;
        }

        .hero-highlights {
            margin-top: 16px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .hero-highlight {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 11px;
            border-radius: 999px;
            background: #ffffff;
            border: 1px solid var(--line);
            font-size: 13px;
            color: #24415f;
            font-weight: 600;
        }

        .hero-highlight i {
            color: #2563eb;
        }

        .portal-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            align-items: stretch;
        }

        .portal-card {
            background: var(--card);
            border-radius: 24px;
            border: 1px solid rgba(148, 163, 184, 0.24);
            box-shadow: var(--shadow);
            padding: 24px 22px 20px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 16px;
            animation: riseIn 0.75s ease both;
        }

        .portal-card:nth-child(2) { animation-delay: 0.12s; }

        .portal-card::before {
            content: "";
            position: absolute;
            width: 180px;
            height: 180px;
            border-radius: 999px;
            right: -70px;
            top: -70px;
            opacity: 0.14;
        }

        .portal-card.employee::before { background: linear-gradient(145deg, var(--employee-a), var(--employee-b)); }
        .portal-card.admin::before { background: linear-gradient(145deg, var(--admin-a), var(--admin-b)); }

        .portal-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            position: relative;
            z-index: 1;
        }

        .portal-icon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            color: #ffffff;
            font-size: 21px;
        }

        .portal-card.employee .portal-icon {
            background: linear-gradient(145deg, var(--employee-a), var(--employee-b));
            box-shadow: 0 12px 22px rgba(2, 132, 199, 0.26);
        }

        .portal-card.admin .portal-icon {
            background: linear-gradient(145deg, var(--admin-a), var(--admin-b));
            box-shadow: 0 12px 22px rgba(30, 58, 138, 0.28);
        }

        .portal-badge {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid transparent;
        }

        .portal-card.employee .portal-badge {
            color: #036b73;
            background: #e6fffa;
            border-color: #99f6e4;
        }

        .portal-card.admin .portal-badge {
            color: #1e3a8a;
            background: #e7efff;
            border-color: #bfdbfe;
        }

        .portal-card h2 {
            margin: 0;
            font-family: "Manrope", sans-serif;
            font-size: 28px;
            font-weight: 800;
            letter-spacing: -0.01em;
        }

        .portal-card p {
            margin: 0;
            color: var(--text-muted);
            line-height: 1.65;
            font-size: 14px;
        }

        .portal-points {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 8px;
            color: #31445f;
            font-size: 14px;
        }

        .portal-points li {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .portal-points li::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #94a3b8;
        }

        .portal-card.employee .portal-points li::before { background: #14b8a6; }
        .portal-card.admin .portal-points li::before { background: #2563eb; }

        .portal-action {
            margin-top: auto;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 13px 14px;
            border-radius: 12px;
            text-decoration: none;
            font-size: 16px;
            font-weight: 700;
            min-height: 48px;
            color: #ffffff;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .portal-action:hover {
            color: #ffffff;
            text-decoration: none;
            transform: translateY(-1px);
        }

        .portal-card.employee .portal-action {
            background: linear-gradient(145deg, var(--employee-a), var(--employee-b));
            box-shadow: 0 14px 22px rgba(2, 132, 199, 0.26);
        }

        .portal-card.admin .portal-action {
            background: linear-gradient(145deg, var(--admin-a), var(--admin-b));
            box-shadow: 0 14px 22px rgba(29, 78, 216, 0.28);
        }

        .welcome-foot {
            text-align: center;
            color: #6b7f97;
            font-size: 13px;
            animation: riseIn 0.85s ease both;
        }

        @keyframes riseIn {
            from { opacity: 0; transform: translateY(12px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 920px) {
            .welcome-shell {
                width: min(760px, 94vw);
                padding-top: 28px;
                padding-bottom: 24px;
                gap: 22px;
            }
            .portal-grid { grid-template-columns: 1fr; }
            .hero h1 {
                font-size: clamp(28px, 7vw, 40px);
                line-height: 1.2;
            }
            .hero p {
                font-size: 15px;
                line-height: 1.65;
            }
            .hero-highlights {
                gap: 8px;
            }
        }

        @media (max-width: 575.98px) {
            .welcome-shell {
                width: 92vw;
                gap: 18px;
                padding-top: 18px;
                padding-bottom: calc(18px + env(safe-area-inset-bottom));
            }

            .brand-row { justify-content: center; }
            .brand-chip {
                padding: 7px 10px;
                font-size: 12px;
            }

            .hero {
                text-align: left;
                max-width: none;
                padding: 16px 14px 14px;
                border-radius: 18px;
                box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
            }

            .hero::before {
                width: 130px;
                height: 130px;
                top: -40px;
                right: -42px;
            }

            .hero h1 {
                font-size: 27px;
                line-height: 1.24;
            }

            .hero p {
                margin-top: 10px;
                font-size: 14px;
                line-height: 1.58;
            }

            .hero-kicker {
                margin-bottom: 8px;
                padding: 6px 9px;
                font-size: 11px;
            }

            .hero-highlights {
                margin-top: 12px;
                display: grid;
                grid-template-columns: 1fr;
            }

            .hero-highlight {
                width: 100%;
                justify-content: flex-start;
                font-size: 12px;
                padding: 7px 9px;
            }

            .portal-card {
                border-radius: 18px;
                padding: 16px 14px 14px;
                gap: 14px;
                box-shadow: 0 14px 28px rgba(15, 23, 42, 0.11);
            }

            .portal-card::before { display: none; }

            .portal-top {
                gap: 10px;
            }

            .portal-icon {
                width: 46px;
                height: 46px;
                border-radius: 14px;
                font-size: 18px;
            }

            .portal-badge {
                font-size: 11px;
                letter-spacing: 0.03em;
                padding: 5px 9px;
            }

            .portal-card h2 { font-size: 23px; }

            .portal-card p,
            .portal-points {
                font-size: 13px;
                line-height: 1.55;
            }

            .portal-action {
                border-radius: 11px;
                font-size: 15px;
                min-height: 46px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .brand-row,
            .hero,
            .portal-card,
            .welcome-foot {
                animation: none !important;
            }
        }