:root {
      --portal-navy: #06255a;
      --portal-navy-dark: #021b45;
      --portal-blue: #0b4db8;
      --portal-green: #297a3f;
      --portal-purple: #6034d6;
      --portal-text: #09235b;
      --portal-muted: #53688f;
      --portal-light: #eef7ff;
      --portal-border: rgba(8, 48, 113, .13);
      --portal-shadow: 0 14px 35px rgba(5, 31, 77, .16);
    }

    * { box-sizing: border-box;e }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--portal-text);
      font-family: "Segoe UI", Arial, sans-serif;
      /*background: #dff1ff;*/
      
    }

    a { text-decoration: none; }

    .top-header {
      /*min-height: 118px;*/
      background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
      border-bottom: 1px solid #d5deea;
    }

    .brand-image {
      width: 100%;
      max-width: 430px;
      height: 92px;
      object-fit: contain;
      object-position: left center;
    }

    .ministry-image {
      width: 100%;
      max-width: 300px;
      height: 92px;
      object-fit: contain;
      object-position: right center;
    }

    .portal-title {
      margin: 0;
      font-weight: 800;
      font-size: clamp(1.55rem, 3.1vw, 2.75rem);
      line-height: 1.05;
      letter-spacing: .01em;
      color: #061f52;
      text-transform: uppercase;
      white-space: nowrap;
      font-size: 1.8rem;
    }

    .portal-tagline {
      margin-top: .7rem;
      font-size: 1.05rem;
      color: #647492;
    }

    .portal-nav {
      background: linear-gradient(90deg, #05285c, #021f4d);
      box-shadow: 0 3px 10px rgba(0, 28, 74, .14);
      height: 46px;
    }

    .portal-nav .navbar-nav .nav-link {
      position: relative;
      padding: 1.1rem 1.65rem;
      font-weight: 600;
      color: #fff;
    }

    .portal-nav .navbar-nav .nav-link:hover,
    .portal-nav .navbar-nav .nav-link.active {
      color: #fff;
    }

    .portal-nav .navbar-nav .nav-link.active::after {
      content: "";
      position: absolute;
      left: 1.05rem;
      right: 1.05rem;
      bottom: 0;
      height: 5px;
      border-radius: 5px 5px 0 0;
      background: #86bd41;
    }

    .page-shell {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      min-height: calc(100vh - 180px);
      background:
        radial-gradient(circle at 14% 13%, rgba(255,255,255,.78), transparent 25%),
        linear-gradient(115deg, #c5e7ff 0%, #eef8ff 40%, #fff5eb 100%);
      background-image: url("assets/images/background_image.png");
      background-size: cover;
      background-position: center;
    }

    .page-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -3;
      /*background:
        linear-gradient(to top, rgba(4,34,75,.30), transparent 29%),
        radial-gradient(circle at 66% 65%, rgba(255, 187, 114, .22), transparent 30%);*/
      pointer-events: none;
    }

    .announcement-bar {
      margin-top: .7rem;
      border: 1px solid rgba(255,255,255,.92);
      border-radius: 14px;
      background: rgba(255,255,255,.88);
      box-shadow: 0 8px 24px rgba(13, 68, 126, .11);
      backdrop-filter: blur(10px);
    }

    .announcement-label {
      display: flex;
      align-items: center;
      gap: .65rem;
      min-width: max-content;
      font-weight: 800;
      color: #123a91;
    }

    .announcement-label i { font-size: 1.55rem; }

    .new-badge {
      display: inline-flex;
      align-items: center;
      padding: .13rem .55rem;
      border-radius: 999px;
      color: #256d36;
      background: #dff2d7;
      font-weight: 800;
    }

    .ticker {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
    }

    .ticker-track {
      display: inline-block;
      padding-left: 1rem;
      animation: ticker 24s linear infinite;
    }

    .ticker.paused .ticker-track { animation-play-state: paused; }

    @keyframes ticker {
      from { transform: translateX(0); }
      to { transform: translateX(-42%); }
    }

    .hero-area {
      position: relative;
      padding: 0.4rem 0 7.8rem;
     
    }

    .hero-copy {
      position: relative;
      z-index: 2;
      padding: 1.65rem .75rem 1rem;
      /*padding:1.65rem 3.75rem 1rem;*/
    }

    .hero-copy h1 {
      margin: 0;
      font-size: clamp(2.4rem, 3.2vw, 2.15rem);
      line-height: 1.08;
      letter-spacing: -.035em;
      font-weight: 800;
      color: #08245b;
    }

    .hero-copy h1 span {
      display: block;
      margin-top: .35rem;
      color: #1f7046;
    }

     .hero-copy span {
        font-size: clamp(2.25rem, 2.5vw, 1.75rem);
        font-weight: 800;
      display: block;
      margin-top: .35rem;
      color: #1f7046;
    }

    .heading-line {
      width: 52px;
      height: 3px;
      margin: 1.5rem 0 1.55rem;
      background: #3c8a4c;
    }

    .hero-copy .lead {
      max-width: 540px;
      font-size: 1.08rem;
      line-height: 1.6;
      color: #16366d;
    }

    .feature-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1.4rem 2.2rem;
      margin-top: 2.25rem;
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: .75rem;
    }

    .feature-icon,
    .round-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 58px;
      height: 58px;
      border: 1px solid var(--portal-border);
      border-radius: 50%;
      background: rgba(255,255,255,.88);
      box-shadow: 0 6px 16px rgba(10, 60, 118, .08);
      font-size: 1.9rem;
      color: #0a47b5;
    }

    .feature-item:nth-child(3) .feature-icon { color: #3d904b; }

    .feature-title {
      font-weight: 800;
      color: #09265e;
    }

    .feature-subtitle {
      margin-top: .15rem;
      font-size: .78rem;
      color: #3e5780;
      white-space: nowrap;
    }

    .glass-card {
      position: relative;
      z-index: 4;
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 16px;
      background: rgba(255,255,255,.72);
      box-shadow: var(--portal-shadow);
      backdrop-filter: blur(12px);
    }

    .docs-card {
      padding: 1.4rem 1.2rem 1.1rem;
    }

    .section-title {
      margin: 0;
      font-weight: 800;
      font-size: 1.13rem;
      color: #08265f;
      text-transform: uppercase;
    }

    .section-accent {
      width: 34px;
      height: 3px;
      margin: .75rem 0 .75rem;
      background: #7bb342;
    }

    .section-copy {
      margin-bottom: 1rem;
      font-size: .88rem;
      color: #15356d;
    }

    .document-link {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin-bottom: .65rem;
      padding: .75rem;
      border: 1px solid rgba(7, 46, 112, .12);
      border-radius: 13px;
      background: rgba(255,255,255,.89);
      color: #09265e;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .document-link:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 18px rgba(3, 38, 91, .10);
      color: #09265e;
    }

    .document-link .round-icon {
      width: 50px;
      height: 50px;
      font-size: 1.5rem;
      background: #edf5ff;
    }

    .document-link .name {
      font-size: .9rem;
      font-weight: 800;
    }

    .document-link .sub {
      font-size: .78rem;
      font-style: normal;
      color: #445e8a;
    }

    .download-icon {
      margin-left: auto;
      font-size: 1.55rem;
      color: #003c9e;
    }

    .login-card {
      position: relative;
      z-index: 4;
      padding: 1.25rem;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: linear-gradient(150deg, #062f68, #032050 65%, #063572);
      box-shadow: 0 18px 42px rgba(2, 29, 74, .25);
      color: #fff;
    }

    .login-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .85rem;
      margin-bottom: 1rem;
    }

    .login-header .round-icon {
      width: 58px;
      height: 58px;
      border-color: rgba(255,255,255,.6);
      background: transparent;
      color: #fff;
    }

    .login-header h2 {
      margin: 0;
      font-size: 1.22rem;
      font-weight: 800;
    }

    .login-header small { color: rgba(255,255,255,.8); }

    .login-option {
      display: flex;
      align-items: center;
      gap: .8rem;
      margin-bottom: .8rem;
      padding: .78rem .85rem;
      border-radius: 12px;
      background: #fff;
      color: #10347f;
      box-shadow: 0 5px 14px rgba(0,0,0,.12);
      transition: transform .18s ease;
    }

    .login-option:hover {
      transform: translateX(4px);
      color: #10347f;
    }

    .login-option .round-icon {
      width: 48px;
      height: 48px;
      border: 0;
      font-size: 1.55rem;
      background: #eef5ff;
    }

    .login-option.seller { color: #236f3c; }
    .login-option.seller .round-icon { color: #236f3c; background: #eef7ef; }
    .login-option.tcm { color: #4c2cc4; }
    .login-option.tcm .round-icon { color: #623bd8; background: #f1edff; }

    .login-option strong {
      display: block;
      font-size: .95rem;
    }

    .login-option small { color: inherit; }

    .login-option > i {
      margin-left: auto;
      font-size: 1.2rem;
    }

    .separator {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin: 1rem 0;
      font-size: .82rem;
      color: rgba(255,255,255,.86);
    }

    .separator::before,
    .separator::after {
      content: "";
      height: 1px;
      flex: 1;
      background: rgba(255,255,255,.55);
    }

    .register-btn {
      border-color: rgba(255,255,255,.75);
      color: #fff;
      font-weight: 700;
    }

    .register-btn:hover {
      background: #fff;
      color: var(--portal-navy);
    }

    .reset-link {
      display: block;
      margin-top: .7rem;
      color: #fff;
      text-align: center;
      font-size: .85rem;
    }

    .plant-illustration {
      position: absolute;
      left: 37%;
      bottom: 5.5rem;
      z-index: 1;
      width: 44%;
      min-width: 560px;
      opacity: .96;
      filter: drop-shadow(0 18px 24px rgba(5, 29, 64, .25));
      pointer-events: none;
    }

    .resource-strip {
      position: absolute;
      left: 3%;
      right: 3%;
      bottom: 0.8rem;
      z-index: 6;
      /*padding: .9rem 1.1rem;*/
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 14px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 12px 30px rgba(3, 31, 75, .18);
    }

    .resource-item {
      display: flex;
      align-items: center;
      gap: .9rem;
      min-height: 100px;
      padding: .2rem 1rem;
      border-right: 1px solid #d8e0ec;
      color: #09265e;
    }

    .resource-item.last { border-right: 0; }

    .resource-item .round-icon {
      width: 64px;
      height: 64px;
      font-size: 1.8rem;
      background: #f0f6ff;
    }

    .resource-item.seller .round-icon { color: #26703d; background: #eef7ef; }
    .resource-item.guideline .round-icon { color: #6535db; background: #f2efff; }

    .resource-item h3 {
      margin: 0 0 .3rem;
      font-size: .95rem;
      font-weight: 800;
    }

    .resource-item p {
      margin: 0;
      font-size: .8rem;
      line-height: 1.55;
      color: #203e77;
    }

    .resource-arrow {
      margin-left: auto;
      font-size: 1.15rem;
      color: #073c9b;
    }

    .portal-footer {
      position: relative;
      z-index: 10;
      padding: 0.5rem 1rem;
      background: linear-gradient(90deg, #05295e, #032354);
      color: #fff;
      text-align: center;
      font-size: .9rem;
      /*height: 32px;*/
    }

    @media (max-width: 1199.98px) {
      .portal-title { white-space: normal; }
      .plant-illustration { left: 32%; width: 58%; opacity: .72; }
      .resource-strip {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 1rem;
      }
      .hero-area { padding-bottom: 1rem; }
      .resource-item { border-right: 0; border-bottom: 1px solid #d8e0ec; }
      .resource-item.last { border-bottom: 0; }
    }

    @media (max-width: 991.98px) {
      .top-header { padding: .5rem 0; }
      .brand-image, .ministry-image { height: 76px; }
      .portal-nav .navbar-nav .nav-link { padding: .75rem 1rem; }
      .portal-nav .navbar-nav .nav-link.active::after { left: .9rem; right: auto; width: 45px; }
      .announcement-label { min-width: auto; }
      .plant-illustration {
        left: 18%;
        bottom: 0;
        width: 78%;
        min-width: 520px;
        opacity: .32;
      }
      
      .hero-copy { text-align: center; }
      .heading-line { margin-left: auto; margin-right: auto; }
      .hero-copy .lead { margin-left: auto; margin-right: auto; }
      .feature-row { justify-content: center; }
    }

    @media (max-width: 575.98px) {
      .top-header .brand-column { display: none; }
      .ministry-column { display: none; }
      .portal-title { font-size: 1.6rem; }
      .portal-tagline { font-size: .9rem; }
      .announcement-bar { border-radius: 10px; }
      .announcement-label span { display: none; }
      .hero-copy h1 { font-size: 2.55rem; }
      .feature-row { display: grid; grid-template-columns: 1fr; justify-items: start; }
      .plant-illustration { left: -32%; width: 145%; opacity: .25; }
      .resource-item { padding-left: .25rem; padding-right: .25rem; }
    }

   .captcha-box {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: .55rem .7rem;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: .5rem;
      background:
        repeating-linear-gradient(
          -35deg,
          rgba(255,255,255,.95) 0 10px,
          rgba(230,239,255,.95) 10px 20px
        );
      color: #0a347f;
    }

    #bidderCaptchaText {
      user-select: none;
      font-family: "Courier New", monospace;
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: .18em;
      transform: skew(-7deg);
    }

    #refreshBidderCaptcha {
      color: #0a347f;
      font-size: 1.1rem;
    }

    #bidderLoginPanel {
      position: relative;
      padding-top: .25rem;
    }

    #backToLoginOptions {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      margin: 0;
      padding: 0;
      font-weight: 600;
      line-height: 1;
    }

    #bidderLoginPanel .form-control,
    #bidderLoginPanel .input-group-text,
    #bidderLoginPanel .btn-light {
      min-height: 46px;
    }

    /* Modern System Settings modal */
    .system-settings-modal {
      --settings-navy: #082b63;
      --settings-blue: #0d6efd;
      --settings-cyan: #0dcaf0;
      --settings-red: #dc3545;
      --settings-green: #198754;
      --settings-bg: #f4f7fb;
      --settings-border: #dfe6ef;
      --settings-muted: #60708a;
    }

    .system-settings-modal .modal-dialog {
      max-width: 1180px;
    }

    .system-settings-modal .modal-content {
      border: 0;
      border-radius: 22px;
      overflow: hidden;
      background: var(--settings-bg);
      box-shadow: 0 28px 85px rgba(2, 23, 57, .38);
    }

    .system-settings-modal .modal-header {
      position: relative;
      align-items: flex-start;
      padding: 1.45rem 1.6rem;
      border: 0;
      color: #fff;
      background:
        radial-gradient(circle at 88% 20%, rgba(255,255,255,.15), transparent 24%),
        linear-gradient(125deg, #082b63 0%, #0b4ca2 62%, #0a6ac0 100%);
    }

    .system-settings-modal .modal-header::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 4px;
      background: linear-gradient(90deg, #55c2ff, #84d95b, #ffc107);
    }

    .settings-header-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 52px;
      height: 52px;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 15px;
      background: rgba(255,255,255,.12);
      font-size: 1.6rem;
    }

    .system-settings-modal .modal-title {
      margin: 0;
      font-size: 1.35rem;
      font-weight: 750;
      letter-spacing: .01em;
    }

    .settings-header-copy {
      margin-top: .25rem;
      color: rgba(255,255,255,.78);
      font-size: .9rem;
    }

    .system-settings-modal .btn-close {
      margin: 0 0 0 1rem;
      padding: .72rem;
      border-radius: 50%;
      background-color: rgba(255,255,255,.90);
      opacity: 1;
    }

    .system-settings-modal .modal-body {
      padding: 1.35rem;
      background: var(--settings-bg);
    }

    .settings-status-banner {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.2rem;
      padding: 1rem 1.1rem;
      border: 1px solid #f1b8be;
      border-left: 5px solid var(--settings-red);
      border-radius: 15px;
      background: #fff6f7;
    }

    .settings-status-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      color: #fff;
      background: var(--settings-red);
      box-shadow: 0 8px 18px rgba(220, 53, 69, .22);
      font-size: 1.35rem;
    }

    .settings-status-title {
      margin: 0;
      color: #842029;
      font-size: 1.02rem;
      font-weight: 750;
    }

    .settings-status-text {
      margin: .18rem 0 0;
      color: #7a4850;
      font-size: .87rem;
    }

    .settings-quick-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-left: auto;
    }

    .settings-quick-actions .btn {
      white-space: nowrap;
      font-weight: 650;
      border-radius: 10px;
    }

    .setup-panel,
    .settings-summary-card {
      height: 100%;
      border: 1px solid var(--settings-border);
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 9px 24px rgba(8, 43, 99, .07);
    }

    .setup-panel {
      padding: 1.15rem;
    }

    .settings-panel-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      margin-bottom: 1rem;
    }

    .settings-panel-heading h3 {
      margin: 0;
      color: #102f62;
      font-size: 1.03rem;
      font-weight: 750;
    }

    .settings-panel-heading .badge {
      padding: .48rem .7rem;
      border-radius: 999px;
      font-weight: 650;
    }

    .setup-step {
      position: relative;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: .9rem;
      padding: .95rem 0;
    }

    .setup-step + .setup-step {
      border-top: 1px solid #e8edf4;
    }

    .step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 13px;
      color: #fff;
      background: linear-gradient(145deg, #0d6efd, #0b4ea2);
      box-shadow: 0 8px 17px rgba(13, 110, 253, .22);
      font-size: 1rem;
      font-weight: 800;
    }

    .setup-step:nth-of-type(3) .step-number {
      background: linear-gradient(145deg, #0aa2c0, #087990);
    }

    .setup-step:nth-of-type(4) .step-number {
      background: linear-gradient(145deg, #198754, #12663f);
    }

    .step-title {
      margin: 0 0 .28rem;
      color: #153565;
      font-size: .98rem;
      font-weight: 750;
    }

    .step-description {
      margin: 0 0 .7rem;
      color: var(--settings-muted);
      font-size: .86rem;
      line-height: 1.55;
    }

    .download-choice {
      display: flex;
      flex-wrap: wrap;
      gap: .65rem;
    }

    .download-choice .btn,
    .setup-step .btn {
      border-radius: 9px;
      font-weight: 650;
    }

    .version-strip {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-bottom: .75rem;
    }

    .version-chip {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .38rem .62rem;
      border: 1px solid #dce5f0;
      border-radius: 999px;
      background: #f7f9fc;
      color: #42546f;
      font-size: .8rem;
    }

    .version-chip strong {
      color: #0d6efd;
    }

    .browser-card {
      padding: .72rem .8rem;
      border: 1px solid #dfe6ef;
      border-radius: 11px;
      background: #f9fbfd;
    }

    .browser-card + .browser-card {
      margin-top: .65rem;
    }

    .browser-name {
      display: flex;
      align-items: center;
      gap: .45rem;
      margin-bottom: .3rem;
      color: #173869;
      font-size: .87rem;
      font-weight: 750;
    }

    .browser-card p {
      margin: 0;
      color: #5a6b84;
      font-size: .82rem;
      line-height: 1.5;
    }

    .browser-card a {
      overflow-wrap: anywhere;
      font-weight: 650;
    }

    .settings-summary-card {
      padding: 1.15rem;
    }

    .summary-title {
      margin: 0 0 .25rem;
      color: #102f62;
      font-size: 1.02rem;
      font-weight: 750;
    }

    .summary-subtitle {
      margin: 0 0 1rem;
      color: var(--settings-muted);
      font-size: .82rem;
    }

    .summary-status-item {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .75rem 0;
      border-bottom: 1px solid #e8edf4;
    }

    .summary-status-item:last-of-type {
      border-bottom: 0;
    }

    .summary-status-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: #eef4ff;
      color: #0d6efd;
      font-size: 1.08rem;
    }

    .summary-status-item.warning .summary-status-icon {
      color: #b78103;
      background: #fff7dd;
    }

    .summary-status-item.danger .summary-status-icon {
      color: #dc3545;
      background: #fff0f2;
    }

    .summary-label {
      color: #203b68;
      font-size: .84rem;
      font-weight: 700;
    }

    .summary-value {
      margin-top: .08rem;
      color: #697991;
      font-size: .78rem;
    }

    .support-note {
      margin-top: 1rem;
      padding: .85rem;
      border-radius: 12px;
      background: #eef6ff;
      color: #315176;
      font-size: .8rem;
      line-height: 1.5;
    }

    .system-settings-modal .modal-footer {
      justify-content: space-between;
      gap: .75rem;
      padding: 1rem 1.35rem;
      border-top: 1px solid var(--settings-border);
      background: #fff;
    }

    .modal-footer-note {
      color: #6d7b91;
      font-size: .8rem;
    }

    .system-settings-modal .modal-footer .btn {
      border-radius: 10px;
      font-weight: 650;
    }

    @media (max-width: 991.98px) {
      .settings-status-banner {
        align-items: flex-start;
        flex-wrap: wrap;
      }

      .settings-quick-actions {
        width: 100%;
        margin-left: 0;
      }
    }

    @media (max-width: 767.98px) {
      .system-settings-modal .modal-dialog {
        margin: .55rem;
      }

      .system-settings-modal .modal-header,
      .system-settings-modal .modal-body,
      .system-settings-modal .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .settings-header-icon {
        width: 44px;
        height: 44px;
      }

      .settings-quick-actions .btn {
        width: 100%;
      }

      .setup-step {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: .7rem;
      }

      .step-number {
        width: 36px;
        height: 36px;
        border-radius: 10px;
      }

      .download-choice .btn {
        width: 100%;
      }

      .system-settings-modal .modal-footer {
        align-items: stretch;
        flex-direction: column;
      }

      .system-settings-modal .modal-footer .d-flex {
        width: 100%;
      }

      .system-settings-modal .modal-footer .btn {
        flex: 1;
      }
    }