:root{
    /* Traditional IITG identity: institutional blue (knowledge) + Assam green (the Brahmaputra & campus landscape) */
    --navy:#0A2E4E;
    --navy-2:#0E3A63;
    --navy-3:#123F5C;
    --green:#1F7A4D;
    --green-light:#3FA372;
    --cyan:#39D2C0;        /* used only as an active "system" accent — glow, pulse, focus */
    --paper:#F2F5F7;       /* cool technical grey-blue, not warm cream */
    --line:#DCE3E8;
    --ink-text:#152230;
    --muted:#5B6B79;
  }

  /* --- small utility patches Bootstrap v4.1.0 doesn't ship (kept minimal, named to match v4 conventions) --- */
  .gap-2{ gap:.5rem !important; }
  .gap-3{ gap:1rem !important; }
  .d-grid{ display:grid !important; }
  .fw-semibold{ font-weight:600 !important; }
  .lh-tight{ line-height:1.1 !important; }

  body{
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    color:var(--ink-text);
    background:
      radial-gradient(rgba(10, 46, 78, 0.16) 1px, transparent 1px),
      var(--paper);
    background-size: 22px 22px;
  }
  a{ color:var(--green); }
  a:hover{ color:var(--navy); }
  .font-serif{ font-family:'Fraunces', Georgia, serif; letter-spacing:-0.01em; }
  .font-mono{ font-family:'IBM Plex Mono', monospace; }
  .text-green{ color: var(--green) !important; }
  .text-navy{ color: var(--navy) !important; }

  /* ---------- Prominent sticky header ---------- */
  .site-header{
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 6px 20px -12px rgba(10,46,78,.25);
  }
  .site-header.sticky-top{ z-index:1030; }
  .site-header .navbar-brand-word strong{ font-family:'Fraunces', serif; font-size:1.15rem; color:var(--navy); }
  .site-header .navbar-brand-word span{ font-size:.68rem; letter-spacing:.1em; font-family:'IBM Plex Mono', monospace; color:var(--green); }
  .status-chip{
    border:1px solid var(--line); border-radius:50rem; font-size:.72rem;
    font-family:'IBM Plex Mono', monospace; color:var(--navy-2);
    background:#fff; padding:.35rem .8rem .35rem .6rem;
  }
  .status-dot{
    width:7px; height:7px; border-radius:50%; background:var(--green);
    animation: pulse 2.2s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(31,122,77,.55); }
    70%{ box-shadow:0 0 0 6px rgba(31,122,77,0); }
    100%{ box-shadow:0 0 0 0 rgba(31,122,77,0); }
  }
  .btn-outline-nav{
    border:1px solid var(--line); border-radius:50rem; font-size:.82rem; color: var(--navy-2);
  }
  .btn-outline-nav:hover{ border-color: var(--green); color: var(--green); background:transparent; }

  /* ---------- Brand panel (circuit-river motif) ---------- */
  .brand-panel{
    position: relative;
    overflow: hidden;
    background:linear-gradient(rgba(0, 0, 0, 0.28),rgba(0, 0, 0, 0.68)),
                url("../../images/iitg4.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: .9rem;
    color: #E7F0EF;
    min-height: 520px;
    box-shadow: 0 24px 60px -20px rgba(10,46,78,.45);
    border: 1px solid rgba(57,210,192,.15);
}
  .brand-panel .circuit{
    position:absolute; inset:0; width:100%; height:100%; opacity:.65;
  }
  .brand-panel .content{ position:relative; z-index:2; }
  .eyebrow-mono{
    font-family:'IBM Plex Mono', monospace; font-size:.8rem; letter-spacing:.16em; font-weight:bold;
    text-transform:uppercase; color: var(--cyan);
    display:inline-flex; align-items:center; gap:.5rem;
  }
  .eyebrow-mono .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); animation: pulse-cyan 2.2s infinite; }
  @keyframes pulse-cyan{
    0%{ box-shadow:0 0 0 0 rgba(57,210,192,.55); }
    70%{ box-shadow:0 0 0 6px rgba(57,210,192,0); }
    100%{ box-shadow:0 0 0 0 rgba(57,210,192,0); }
  }
  .brand-panel h1{ font-family:'Fraunces', serif; font-size:calc(1.5rem + 1vw); color:#F4F8F7; max-width:11.5em; }
  .accent-line{ width:52px; height:2.5px; background:linear-gradient(90deg, var(--green-light), var(--cyan)); border-radius:2px; }
  .brand-panel .lede{ font-size:.95rem; color:#B9CBD3; max-width:32em; }
  .stat-row{ border-top:1px solid rgba(57,210,192,.18); }
  .stat-row b{ font-family:'IBM Plex Mono', monospace; font-size:1.3rem; color:var(--cyan); display:block; }
  .stat-row span{ font-size:.7rem; color:#8FA6AF; font-family:'IBM Plex Mono', monospace; letter-spacing:.03em; }

  /* ---------- Login card ---------- */
  .login-card-wrap{ position:relative; height:100%; }
  .login-card{
    background:#fff; border-radius:.9rem; border:1px solid var(--line);
    box-shadow:0 24px 60px -20px rgba(10,46,78,.3);
    position:relative;
  }
  .corner-tl, .corner-br{ content:''; position:absolute; width:22px; height:22px; z-index:3; }
  .corner-tl{ top:-1px; left:-1px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); border-top-left-radius:.9rem; }
  .corner-br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan); border-bottom-right-radius:.9rem; }

  .login-card .kicker{
    font-family:'IBM Plex Mono', monospace; display: inline !important; padding: 1px;border-radius: 10px;padding: 5px 9px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--green);background: #e8f4e2;
  }
  .login-card h2{ font-family:'Fraunces', serif; color: var(--navy); }
  .form-label{ display:inline-block; margin-bottom:.5rem; }
  .form-control{ border-color: var(--line); background:#FAFBFC; padding:.7rem .9rem; height:auto; }
  .form-control:focus{
    border-color: var(--cyan); background:#fff;
    box-shadow:0 0 0 .2rem rgba(57,210,192,.18);
  }
  .input-group-text{ background:#FAFBFC; border-color: var(--line); color:#8B99A3; }
  .btn-toggle-pw{
    border-color: var(--line); background:#FAFBFC; color: var(--navy-2); font-weight:600; font-size:.72rem;
  }
  .btn-login{
    background: var(--navy); border-color: var(--navy); color:#fff;
    font-weight:600; padding:.75rem 1rem; border-radius:.55rem;
    box-shadow:0 10px 24px -10px rgba(10,46,78,.6);
    transition: background .18s, box-shadow .18s;
  }
  .btn-login:hover{ background: var(--navy-2); border-color: var(--navy-2); color:#fff; box-shadow:0 10px 26px -8px rgba(57,210,192,.35); }
  .form-note{
    font-size:.78rem; background:#F0F6F4; border:1px dashed var(--line); border-radius:.5rem; display:none;
  }
  .form-note.show{ display:block; }
  .form-check-input:checked ~ .form-check-label::before{ background-color:var(--green); }
  a.link-forgot{ color: var(--green); font-weight:600; font-size:.85rem; text-decoration:none; }
  a.link-forgot:hover{ text-decoration:underline; }

  /* ---------- Section badges ---------- */
  .section-num{
    font-family:'IBM Plex Mono', monospace; font-size:.7rem; color: var(--navy-2);
    border:1px solid var(--line); border-radius:.3rem; padding:.15rem .55rem; background:#fff;
  }
  .section-num b{ color:var(--green); }
  .section-title{ font-family:'Fraunces', serif; color: var(--navy); }

  /* ---------- About card ---------- */
  .about-card{ border-radius:.85rem; border:1px solid var(--line); box-shadow:0 2px 10px rgba(10,46,78,.05); }
  .about-figure{
    position:relative;border-top-right-radius: .85rem; border-bottom-right-radius: 0.85rem; overflow:hidden; min-height:200px;
    background:linear-gradient(rgba(0, 0, 0, 0.50),rgba(0, 0, 0, 0.50)),
                url("../../images/ccc.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(57,210,192,.2);
  }
  .about-figure .figure-label{ position:relative; z-index:2; text-align:center; color:#fff; }
  .about-figure .figure-label b{ font-family:'IBM Plex Mono', monospace; font-size:1.6rem; display:block; color:var(--cyan); }
  .about-figure .figure-label span{
    font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#DCEAE6;
  }
  .more-link{ color: var(--paper); font-weight:600; font-size:.85rem; text-decoration:none; }
  .more-link:hover{ text-decoration:underline; }

  /* ---------- Panels ---------- */
  .panel{ border-radius:.85rem; border:1px solid var(--line); box-shadow:0 2px 10px rgba(10,46,78,.05); background:#fff; }
  .contact-list li{ border-bottom:1px solid var(--line); }
  .contact-list li:last-child{ border-bottom:none; }
  .c-mail{ font-family:'IBM Plex Mono', monospace; font-size:.78rem; color: var(--green); text-decoration:none; white-space:nowrap; }
  .c-mail:hover{ text-decoration:underline; }
  .c-note a{ color: var(--green); font-weight:600; text-decoration:none; }
  .c-note a:hover{ text-decoration:underline; }

  .link-item{
    border:1px solid var(--line); border-radius:.5rem; text-decoration:none; color:var(--ink-text);
    font-size:.86rem; font-weight:500; transition:.18s; background:#FAFBFC;
  }
  .link-item:hover{ border-color: var(--cyan); background:#EFFBF9; color: var(--navy); transform:translateX(2px); }
  .link-item i{ color: var(--green); }

  footer{ border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); font-family:'IBM Plex Mono', monospace; }

  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

  .login-options-wrapper{
    margin-bottom:24px;
}

.announcement-box{
    background:rgba(23,162,184,.12);
    border:1px solid rgba(23,162,184,.35);
    border-left:5px solid #17a2b8;
    color:#0c5460;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    font-size: 14px;
    border-radius: 0;
    border-top: 0;
}

.announcement-box .fa-info-circle{
    color:#17a2b8;
}

.login-options{
    position:relative;
    display:flex;
    background:#eef2f7;
    border-radius:50px;
    padding:4px;
    overflow:hidden;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.08);
}

.login-slider{
    position:absolute;
    top:4px;
    left:4px;
    height:calc(100% - 8px);
    background:#fff;
    border-radius:40px;
    transition:all .35s ease;
    z-index:1;
}

.login-options-item{
    position:relative;
    z-index:2;

    flex:1;
    text-align:center;

    padding:11px 12px;

    color:#6c757d;
    font-weight:600;
    text-decoration:none;

    transition:.3s;
}

.login-options-item:hover{
    text-decoration:none;
    color:#0b3558;
}

.login-options-item.active{
    color:#0b3558;
}


.social-sidebar{
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-btn{
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    color: #fff;
    text-decoration: none;

    font-size: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    transition: all .25s ease;
}

.social-btn svg{
    width: 18px;
    height: 18px;
}

.social-btn:hover{
    color: #fff;
    transform: translateX(-6px) scale(1.1);
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

/* Brand Colors */
.facebook{
    background:#1877F2;
}

.twitter-x{
    background:#000000;
}

.linkedin{
    background:#0A66C2;
}

.youtube{
    background:#FF0000;
}

.instagram{
    background:linear-gradient(45deg,
        #F58529,
        #FEDA77,
        #DD2A7B,
        #8134AF,
        #515BD4);
}

.btn-login:disabled{
    opacity: .8;
    cursor: not-allowed;
}

.scroll-toggle{
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    background: #0b3558;
    color: #fff;
    font-size: 20px;
    cursor: pointer;

    box-shadow: 0 10px 25px rgba(0,0,0,.2);
    transition: all .3s ease;
    z-index: 1050;
}

.scroll-toggle:hover{
    background: #00b4a6;
    transform: translateY(-4px);
}

.scroll-toggle:focus{
    outline: none;
}

.iitg-floating-card{
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1050;

    display: flex;
    align-items: center;
    gap: 12px;

    background: #fff;
    padding: 10px 16px 10px 10px;

    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    border: 1px solid #e9ecef;

    transition: all .3s ease;
    cursor: default;
}

.iitg-floating-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,.22);
}

.iitg-floating-card img{
    width: 33px;
    height: 33px;
    border-radius: 50%;
    flex-shrink: 0;
}

.iitg-info{
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.iitg-title{
    font-size: 12px;
    font-weight: 700;
    color: #0b3558;
}

.iitg-info small{
    font-size: 12px;
    color: #6c757d;
}

.browser-note{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    font-size: 13px;
    color: #6c757d;
    line-height: 1.5;
}

.browser-note i{
    color: #f0ad4e;
    margin-top: 2px;
    flex-shrink: 0;
}

.glass-info{
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.18);
    border-radius:16px;

    padding:16px 20px;

    color:rgba(255,255,255,.92);
    font-size:15px;
    line-height:1.75;

    box-shadow:
        0 10px 35px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.20);

    transition:.3s ease;
}

.glass-info:hover{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.28);
    transform:translateY(-2px);
}

.glass-info i{
    color:#7dd3fc;
}

@media (max-width:768px){
    .iitg-floating-card{
        left: 15px;
        bottom: 15px;
        padding: 8px 12px 8px 8px;
    }

    .iitg-info small{
        display: none;
    }
}

@media (max-width:768px){
    .social-sidebar{
        right: 12px;
    }

    .social-btn{
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}