* {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }



    body {

      font-family: 'Space Grotesk', sans-serif;

      background: radial-gradient(circle at 10% 30%, #f8f9ff, #eef2ff);

      min-height: 100vh;

      overflow-x: hidden;

      position: relative;

      color: #1a2c3e;

    }



    /* abstract animated blobs */

    .blob {

      position: fixed;

      width: 50vw;

      height: 50vw;

      border-radius: 62% 38% 72% 28% / 48% 32% 68% 52%;

      background: linear-gradient(125deg, #c0e0ff40, #a0c4ff30);

      filter: blur(70px);

      z-index: 0;

      pointer-events: none;

      animation: drift 22s infinite alternate ease-in-out;

    }

    .blob-1 { top: -20vh; right: -10vw; background: #b2d9ff50; }

    .blob-2 { bottom: -15vh; left: -15vw; width: 60vw; height: 60vw; background: #ffd6c030; animation-duration: 28s; }

    @keyframes drift {

      0% { transform: translate(0, 0) rotate(0deg); }

      100% { transform: translate(5%, 8%) rotate(8deg); }

    }



    .container {

      max-width: 1380px;

      margin: 0 auto;

      padding: 1.5rem 2rem;

      position: relative;

      z-index: 5;

    }



    /* header with glass */

    .glass-nav {

      backdrop-filter: blur(12px);

      background: rgba(255, 255, 255, 0.65);

      border-radius: 3rem;

      padding: 0.8rem 2rem;

      display: flex;

      justify-content: space-between;

      align-items: center;

      flex-wrap: wrap;

      gap: 1rem;

      box-shadow: 0 8px 20px rgba(0,0,0,0.02), 0 0 0 1px rgba(255,255,255,0.7);

      border: 1px solid rgba(255,255,255,0.6);

      margin-bottom: 2rem;

    }



    .logo h1 {

      font-size: 1.8rem;

      font-weight: 700;

      background: linear-gradient(135deg, #1f4870, #2c6e9e);

      background-clip: text;

      -webkit-background-clip: text;

      color: transparent;

      letter-spacing: -0.02em;

    }

    .logo span {

      font-size: 0.7rem;

      font-weight: 500;

      color: #4b6a8b;

      display: block;

      margin-top: 2px;

    }



    .nav-links {

      display: flex;

      gap: 2rem;

      align-items: center;

      flex-wrap: wrap;

    }

    .nav-links a {

      text-decoration: none;

      font-weight: 500;

      color: #1e3b4f;

      transition: 0.2s;

      font-size: 1rem;

    }

    .nav-links a:hover {

      color: #2c6e9e;

      transform: translateY(-2px);

    }

    .auth-buttons {

      display: flex;

      gap: 0.8rem;

    }

    .btn-outline-light {

      background: transparent;

      border: 1px solid #cbdde9;

      padding: 0.5rem 1.3rem;

      border-radius: 2rem;

      font-weight: 600;

      font-size: 0.85rem;

      color: #1f4870;

      transition: 0.2s;

      cursor: pointer;

    }

    .btn-outline-light:hover {

      background: white;

      border-color: #2c6e9e;

      box-shadow: 0 4px 10px rgba(0,0,0,0.02);

    }

    .btn-solid-sm {

      background: #1f4870;

      border: none;

      padding: 0.5rem 1.4rem;

      border-radius: 2rem;

      font-weight: 600;

      font-size: 0.85rem;

      color: white;

      cursor: pointer;

      transition: 0.2s;

    }

    .btn-solid-sm:hover {

      background: #0e3a5c;

      transform: scale(0.97);

    }



    /* Hero Section - unique split */

    .hero-section {

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      align-items: center;

      gap: 2rem;

      margin: 2.5rem 0 3rem;

    }

    .hero-text {

      flex: 1.2;

      min-width: 260px;

    }

    .hero-text h2 {

      font-size: 3.2rem;

      font-weight: 700;

      line-height: 1.2;

      background: linear-gradient(125deg, #0F2C3F, #1C5A7A);

      background-clip: text;

      -webkit-background-clip: text;

      color: transparent;

      margin-bottom: 1rem;

    }

    .hero-text p {

      font-size: 1.1rem;

      color: #2c4c6c;

      margin-bottom: 2rem;

      max-width: 500px;

      font-weight: 500;

    }

    .hero-illustration {

      flex: 0.9;

      background: rgba(255,255,240,0.3);

      border-radius: 2rem;

      backdrop-filter: blur(4px);

      padding: 1rem;

      text-align: center;

    }

    .hero-illustration i {

      font-size: 7rem;

      color: #2c6e9e;

      filter: drop-shadow(0 10px 12px rgba(0,0,0,0.1));

    }



    /* main setup card - 3D tilt effect and unique border */

    .setup-card {

      background: rgba(255, 255, 255, 0.9);

      backdrop-filter: blur(12px);

      border-radius: 3rem;

      padding: 2rem 2.5rem;

      margin: 2rem 0 3rem;

      box-shadow: 0 25px 45px -18px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255,255,255,0.7);

      transition: transform 0.25s ease, box-shadow 0.3s;

      border: 1px solid rgba(255,255,255,0.8);

    }

    .setup-card:hover {

      transform: translateY(-6px);

      box-shadow: 0 32px 55px -20px rgba(0, 0, 0, 0.25);

    }



    .section-title {

      font-size: 2rem;

      font-weight: 600;

      letter-spacing: -0.3px;

      margin-bottom: 0.4rem;

      display: flex;

      align-items: center;

      gap: 12px;

    }

    .section-title i {

      background: #eef3fc;

      padding: 10px;

      border-radius: 50%;

      font-size: 1.2rem;

      color: #1f6e9c;

    }

    .sub {

      color: #5f7f9c;

      margin-bottom: 2rem;

      font-weight: 500;

      /* border-left: 3px solid #2c6e9e; */

      padding-left: 14px;

    }



    /* two column layout */

    .form-row {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 2rem;

      /* margin-bottom: 2rem; */

    }

    .input-card {

      background: #ffffffcc;

      border-radius: 1.8rem;

      padding: 0.2rem 0;

      transition: all 0.2s;

    }

    .input-group {

      margin-bottom: 1.2rem;

    }

    .input-group label {

      font-weight: 600;

      display: flex;

      align-items: center;

      gap: 8px;

      margin-bottom: 8px;

      font-size: 0.9rem;

      color: #1c3f5c;

    }

    .input-group label i {

      width: 20px;

      color: #2c6e9e;

    }

    .input-field {

      width: 100%;

      padding: 14px 18px;

      font-size: 1rem;

      font-family: 'Space Grotesk', monospace;

      background: white;

      border: 1.5px solid #e2edf7;

      border-radius: 1.5rem;

      outline: none;

      transition: 0.2s;

      font-weight: 500;

    }

    .input-field:focus {

      border-color: #2c6e9e;

      box-shadow: 0 0 0 4px rgba(44,110,158,0.15);

    }

    .helper {

      font-size: 0.7rem;

      color: #6f8fae;

      margin-top: 6px;

      margin-left: 12px;

    }



    .double-minmax {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 1.2rem;

    }



    .btn-group {

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      align-items: center;

      /* margin-top: 2rem; */

      gap: 1rem;

    }

    .btn-primary-glow {

      background: linear-gradient(105deg, #1f4870, #2a6496);

      border: none;

      padding: 14px 32px;

      border-radius: 3rem;

      font-weight: 600;

      font-size: 1rem;

      color: white;

      display: inline-flex;

      align-items: center;

      gap: 12px;

      cursor: pointer;

      transition: all 0.2s;

      box-shadow: 0 6px 14px rgba(31,72,112,0.25);

    }

    .btn-primary-glow:hover {

      transform: translateY(-3px);

      box-shadow: 0 18px 28px -8px #1f487070;

    }

    .btn-step {

      background: rgba(44,110,158,0.08);

      border: 1.5px solid #cbe0ee;

      padding: 12px 30px;

      border-radius: 3rem;

      font-weight: 600;

      color: #1f5e88;

      cursor: pointer;

      transition: 0.2s;

      display: inline-flex;

      align-items: center;

      gap: 8px;

    }

    .btn-step:hover {

      background: #ffffff;

      border-color: #2c6e9e;

      transform: translateX(6px);

    }



    .message-area {

      margin-top: 1.4rem;

      padding: 12px 20px;

      border-radius: 2rem;

      font-size: 0.85rem;

      font-weight: 500;

      background: #fef6e0;

      border-left: 6px solid #f5b042;

      transition: 0.2s;

    }

    .success-badge {

      background: #e2f3e4;

      border-left-color: #2b9348;

      color: #146b3a;

    }

    .error-badge {

      background: #ffe8e6;

      border-left-color: #d9534f;

      color: #b13b38;

    }



    footer {

      text-align: center;

      margin-top: 3rem;

      padding: 1.5rem;

      color: #5d7f9e;

      font-size: 0.8rem;

      border-top: 1px solid rgba(0,0,0,0.05);

    }



    @media (max-width: 850px) {

      .container { padding: 1rem; }

      .form-row { grid-template-columns: 1fr; gap: 1rem; }

      .hero-text h2 { font-size: 2.4rem; }

      .setup-card { padding: 1.5rem; }

      .glass-nav { flex-direction: column; align-items: stretch; text-align: center; }

      .nav-links { justify-content: center; }

    }

    .animate-shake {

      animation: shake 0.3s ease-in-out 0s 2;

    }

    @keyframes shake {

      0%,100%{ transform: translateX(0); }

      25%{ transform: translateX(-5px); }

      75%{ transform: translateX(5px); }

    }





/* .....depertment.................. */

/* decorative floating shapes */

    .bg-ornament {

      position: fixed;

      border-radius: 50%;

      filter: blur(80px);

      z-index: 0;

      pointer-events: none;

    }

    .orn-1 {

      width: 40vw;

      height: 40vw;

      background: radial-gradient(circle, rgba(100,160,220,0.2), rgba(70,130,200,0.05));

      top: -10vh;

      right: -5vw;

      animation: float1 20s infinite alternate;

    }

    .orn-2 {

      width: 55vw;

      height: 55vw;

      background: radial-gradient(circle, rgba(255,200,170,0.15), rgba(240,150,110,0.05));

      bottom: -20vh;

      left: -10vw;

      animation: float2 25s infinite alternate;

    }

    @keyframes float1 {

      0% { transform: translate(0, 0) rotate(0deg); }

      100% { transform: translate(6%, 8%) rotate(6deg); }

    }

    @keyframes float2 {

      0% { transform: translate(0, 0) rotate(0deg); }

      100% { transform: translate(-5%, -6%) rotate(-8deg); }

    }



    /* main glass container */

    .glass-container {

      max-width: 100%;

      width: 100%;

      background: rgba(255, 255, 255, 0.78);

      backdrop-filter: blur(16px);

      border-radius: 2.5rem;

      box-shadow: 0 25px 45px -18px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255,255,255,0.6);

      padding: 2rem;

      z-index: 10;

      border: 1px solid rgba(255,255,255,0.7);

      transition: all 0.2s;

    }



    /* header area */

    .header-unique {

      display: flex;

      justify-content: space-between;

      align-items: flex-end;

      flex-wrap: wrap;

      margin-bottom: 2rem;

      padding-bottom: 0.75rem;

      border-bottom: 2px dashed rgba(44, 110, 158, 0.3);

    }

    .title-block h1 {

      font-size: 2rem;

      font-weight: 800;

      background: linear-gradient(125deg, #1a4a6f, #2c7eb0);

      background-clip: text;

      -webkit-background-clip: text;

      color: transparent;

      letter-spacing: -0.02em;

      display: flex;

      align-items: center;

      gap: 12px;

    }

    .title-block h1 i {

      background: none;

      color: #2c6e9e;

      font-size: 1.8rem;

    }

    .title-block p {

      color: #527a9c;

      font-weight: 500;

      font-size: 0.85rem;

      margin-top: 4px;

    }

    .info-badge {

      background: rgba(44,110,158,0.12);

      padding: 6px 16px;

      border-radius: 40px;

      font-size: 0.75rem;

      font-weight: 600;

      color: #1f5e88;

      backdrop-filter: blur(4px);

    }



    /* teacher rows - static, no JS needed */

    .teachers-table {

      margin: 1.8rem 0 1.8rem;

    }

    .teacher-row {

      display: flex;

      flex-wrap: wrap;

      gap: 1rem;

      align-items: center;

      background: rgba(255, 255, 255, 0.7);

      border-radius: 1.6rem;

      padding: 0.9rem 1.2rem;

      margin-bottom: 1rem;

      box-shadow: 0 2px 6px rgba(0,0,0,0.02), 0 0 0 1px rgba(255,255,255,0.8);

      transition: all 0.2s;

    }

    .teacher-row:hover {

      background: rgba(255, 255, 255, 0.9);

      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05), 0 0 0 1px #d4e2f0;

    }



    .input-field-group {

      flex: 1;

      min-width: 200px;

    }

    .input-field-group label {

      font-size: 0.7rem;

      font-weight: 700;

      text-transform: uppercase;

      letter-spacing: 0.6px;

      color: #2c6e9e;

      display: flex;

      align-items: center;

      gap: 6px;

      margin-bottom: 15px;

    }

    .input-field-group label i {

      font-size: 0.7rem;

    }

    .stylish-input {

      width: 100%;

      padding: 16px 16px;

      font-size: 0.9rem;

      font-family: 'Plus Jakarta Sans', sans-serif;

      background: white;

      border: 1.5px solid #e2edf7;

      border-radius: 1.5rem;

      outline: none;

      transition: 0.2s;

      font-weight: 500;

    }

    .stylish-input:focus {

      border-color: #2c6e9e;

      box-shadow: 0 0 0 3px rgba(44,110,158,0.15);

    }



    /* decorative remove icon (static, non-functional but visual) */

    .static-icon {

      width: 42px;

      height: 42px;

      background: rgba(200, 70, 60, 0.08);

      border-radius: 40px;

      display: flex;

      align-items: center;

      justify-content: center;

      color: #bf5b50;

      font-size: 1rem;

      cursor: default;

      transition: 0.1s;

    }

    .static-icon i {

      pointer-events: none;

    }



    /* action bar with static buttons (no JS) */

    .action-bar-static {

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      align-items: center;

      margin-top: 1rem;

      padding-top: 1.2rem;

      border-top: 1px solid rgba(0,0,0,0.05);

      gap: 1rem;

    }

    .btn-primary-static {

      background: linear-gradient(115deg, #1f4870, #2a6a96);

      border: none;

      padding: 12px 28px;

      border-radius: 3rem;

      font-weight: 600;

      font-size: 0.85rem;

      color: white;

      display: inline-flex;

      align-items: center;

      gap: 10px;

      cursor: pointer;

      transition: 0.2s;

      box-shadow: 0 6px 14px rgba(31,72,112,0.2);

    }

    .btn-primary-static:hover {

      transform: translateY(-2px);

      box-shadow: 0 12px 22px rgba(31,72,112,0.25);

    }

    .btn-secondary-static {

      background: rgba(44,110,158,0.08);

      border: 1.5px solid #cde0ef;

      padding: 10px 24px;

      border-radius: 3rem;

      font-weight: 600;

      font-size: 0.8rem;

      color: #2c5f8a;

      cursor: pointer;

      transition: 0.2s;

      display: inline-flex;

      align-items: center;

      gap: 8px;

    }

    .btn-secondary-static:hover {

      background: white;

      border-color: #2c6e9e;

      transform: translateX(3px);

    }



    .info-note {

      text-align: center;

      margin-top: 1.5rem;

      font-size: 0.7rem;

      color: #7c98b3;

      border-top: 1px dashed #cde0ef;

      padding-top: 1rem;

    }



    @media (max-width: 750px) {

      body { padding: 1rem; }

      .glass-container { padding: 1.2rem; }

      .teacher-row { flex-direction: column; align-items: stretch; }

      .static-icon { align-self: flex-end; }

      .title-block h1 { font-size: 1.6rem; }

    }







/* ....table.................................... */

/* Header */

.header {

    display: flex;

    justify-content: space-between;

    padding:0px 20px 20px 20px;

    align-items: center;

}



.header h2 {

    margin: 0;

    color: #333;

}



/* Button */

.btn {

    background: linear-gradient(45deg, #ff7e5f, #feb47b);

    color: white;

    padding: 10px 18px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    transition: 0.3s;

}



.btn:hover {

    transform: scale(1.05);

}



/* Day */

.day {

    text-align: center;

    background: linear-gradient(to right, #141e30, #243b55);

    color: white;

    padding: 15px;

    font-size: 22px;

    letter-spacing: 6px;

}



/* Table */

table {

    width: 100%;

    border-collapse: collapse;

    margin-bottom: 40px;

    box-shadow: 0 0 10px rgb(0,0,0,.18);

}



th {

    background: #f4f6fb;

    padding: 12px;

    color: #555;

}



td {

    padding: 15px;

    text-align: center;

    border-top: 1px solid #eee;

    transition: 0.2s;

}



/* Hover effect */

td:hover {

    background: #f9f9ff;

}



/* Time column */

.time {

    font-weight: bold;

    background: #eef2ff;

}



/* Subject */

.sub {

    font-weight: bold;

    color: #333;

}



/* Break row */

.break {

    background: linear-gradient(45deg, #ff9a9e, #fad0c4);

    color: #a10000;

    font-weight: bold;

    letter-spacing: 2px;

}



/* Responsive */

@media(max-width: 768px){

    table {

        font-size: 12px;

    }

}

/* ...............bca-subject...................................................... */