:root {
    --primary-color   : #1e3a8a;
    --secondary-color : #3b82f6;
    --accent-color    : #f59e0b;
    --text-color      : #1f2937;
    --bg-light        : #f9fafb;
    --max-width       : 1280px;
}

body {
    background-color : var(--bg-light);
    color            : var(--text-color);
    margin           : 0;
    padding          : 0;
    min-height       : 100vh;
    line-height      : 1.5;
    font-family      : sans-serif;
}

.max-w-7xl {
    max-width     : var(--max-width);
    margin-left   : auto;
    margin-right  : auto;
    padding-left  : 1rem;
    padding-right : 1rem;
}

header {
    position         : sticky;
    top              : 0;
    z-index          : 50;
    background-color : white;
    box-shadow       : 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.navbar {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    height          : 4rem;
}

.logo {
    display     : flex;
    align-items : center;
    font-size   : 1.25rem;
    font-weight : 700;
    color       : #1e40af;
    cursor      : pointer;
}

.logo i {
    font-size    : 1.5rem;
    margin-right : 0.5rem;
    color        : #2563eb;
}

.nav-buttons button {
    padding       : 0.5rem 1rem;
    font-size     : 0.875rem;
    font-weight   : 500;
    border-radius : 0.5rem;
    box-shadow    : 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition    : background-color 150ms ease-in-out;
    border        : 1px solid transparent;
}

.dashboard-btn {
    color            : #374151;
    background-color : #f3f4f6;
    text-decoration  : none;
    width            : 100px;
    justify-content  : center;
    display          : flex;
    align-items      : center;
    border-radius    : 0.5rem;
    padding          : 5px 0;
}

.dashboard-btn:hover {
    background-color : #e5e7eb;
}

.signin-btn {
    color            : white;
    background-color : #2563eb;
    text-decoration  : none;
    width            : 100px;
    justify-content  : center;
    display          : flex;
    align-items      : center;
    border-radius    : 0.5rem;
    padding          : 5px 0;
}

.signin-btn:hover {
    background-color : #1d4ed8;
}

#banner-hero {
    background-color    : var(--primary-color);
    background-size     : cover;
    background-position : center;
    height              : 400px;
    display             : flex;
    align-items         : center;
    justify-content     : center;
    position            : relative;
    box-shadow          : 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#banner-hero h1 {
    font-size     : 3rem;
    font-weight   : 800;
    margin-bottom : 0.5rem;
    line-height   : 1.25;
}

#banner-hero p {
    font-size : 1.125rem;
    opacity   : 0.9;
}

.search-container {
    max-width : 56rem;
    width     : 100%;
    padding   : 1rem;
}

.search-bar {
    display          : flex;
    background-color : white;
    border-radius    : 0.75rem;
    box-shadow       : 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding          : 0.5rem;
}

.search-bar label {
    display : none;
}

.search-bar input {
    flex-grow     : 1;
    padding       : 0.75rem 1rem;
    border-radius : 0.5rem 0 0 0.5rem;
    color         : #1f2937;
    border        : none;
    outline       : none;
}

.search-bar button {
    background-color : #2563eb;
    color            : white;
    padding          : 0.75rem 1.5rem;
    border-radius    : 0.5rem;
    transition       : background-color 150ms ease-in-out;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    border           : none;
    cursor           : pointer;
}

.search-bar button:hover {
    background-color : #1d4ed8;
}

#main-page section {
    padding-top    : 3rem;
    padding-bottom : 3rem;
}

#main-page h2 {
    font-size      : 1.875rem;
    font-weight    : 700;
    color          : #1f2937;
    margin-bottom  : 2rem;
    border-bottom  : 1px solid #e5e7eb;
    padding-bottom : 0.5rem;
}

.university-grid {
    display : grid;
    gap     : 2rem;
}

.university-card {
    background-color : white;
    border-radius    : 0.75rem;
    box-shadow       : 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    overflow         : hidden;
    border           : 1px solid #f3f4f6;
    transition       : transform 0.2s, box-shadow 0.2s;
}

.university-card:hover {
    transform  : translateY(-5px);
    box-shadow : 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.university-card img {
    width      : 100%;
    height     : 10rem;
    object-fit : cover;
}

.university-card-content {
    padding : 1.25rem;
}

.university-card-content h3 {
    font-size     : 1.25rem;
    font-weight   : 600;
    color         : #1f2937;
    margin-bottom : 0.5rem;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.university-card-content p {
    font-size     : 0.875rem;
    color         : #6b7280;
    margin-bottom : 0.75rem;
}

.card-details-row {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
}

.detail-item {
    display      : inline-flex;
    align-items  : center;
    font-size    : 0.875rem;
    color        : #6b7280;
    margin-right : 0.5rem;
}

.detail-item i {
    margin-right : 0.25rem;
}

.save-btn {
    display          : flex;
    align-items      : center;
    padding          : 0.375rem 0.75rem;
    font-size        : 0.875rem;
    font-weight      : 500;
    border-radius    : 0.5rem;
    color            : #2563eb;
    border           : 1px solid #2563eb;
    background-color : white;
    transition       : all 150ms ease-in-out;
    cursor           : pointer;
}

.save-btn:hover {
    background-color : #2563eb;
    color            : white;
}

.save-btn i {
    margin-right : 0.375rem;
}

#auth-page {
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 2rem 1rem;
}

.auth-card {
    max-width        : 64rem;
    width            : 100%;
    background-color : white;
    border-radius    : 1rem;
    box-shadow       : 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow         : hidden;
    display          : flex;
    flex-direction   : column;
}

.auth-image-panel {
    background-color : var(--primary-color);
    padding          : 3rem 2rem;
    display          : flex;
    flex-direction   : column;
    justify-content  : center;
    align-items      : center;
    text-align       : center;
    color            : white;
}

.auth-image-panel i.fa-building-columns {
    font-size     : 4.375rem;
    margin-bottom : 1.5rem;
    color         : #93c5fd;
}

.auth-image-panel h2 {
    font-size     : 1.875rem;
    font-weight   : 700;
    margin-bottom : 0.5rem;
}

.auth-image-panel p {
    color         : #bfdbfe;
    margin-bottom : 1.5rem;
}

.auth-form-panel {
    padding : 3rem 2rem;
}

.form-group {
    margin-bottom : 1.5rem;
}

.form-group label {
    display       : block;
    font-size     : 0.875rem;
    font-weight   : 500;
    color         : #374151;
    margin-bottom : 0.25rem;
}

.form-group input {
    width         : 100%;
    padding       : 0.75rem 1rem;
    border        : 1px solid #d1d5db;
    border-radius : 0.5rem;
    transition    : border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
    box-sizing    : border-box;
}

.form-group input:focus {
    outline      : none;
    border-color : #3b82f6;
    box-shadow   : 0 0 0 1px #3b82f6;
}

.form-submit-btn {
    width            : 100%;
    display          : flex;
    justify-content  : center;
    padding          : 0.75rem 1rem;
    border           : 1px solid transparent;
    border-radius    : 0.5rem;
    box-shadow       : 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size        : 1.125rem;
    font-weight      : 500;
    color            : white;
    background-color : #2563eb;
    cursor           : pointer;
    transition       : background-color 150ms ease-in-out;
}

.form-submit-btn:hover {
    background-color : #1d4ed8;
}

#dashboard-page {
    padding-top    : 2.5rem;
    padding-bottom : 2.5rem;
}

.dashboard-layout {
    display        : flex;
    gap            : 2rem;
    flex-direction : column;
}

.dashboard-sidebar {
    width            : 100%;
    background-color : white;
    border-radius    : 0.75rem;
    box-shadow       : 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding          : 1.5rem;
    height           : fit-content;
}

.dashboard-sidebar h3 {
    font-size     : 1.5rem;
    font-weight   : 700;
    color         : #1f2937;
    margin-bottom : 1.5rem;
}

.dashboard-sidebar nav {
    display        : flex;
    flex-direction : column;
    gap            : 0.5rem;
}

.dashboard-sidebar a,
.dashboard-sidebar button {
    display          : flex;
    align-items      : center;
    gap              : 0.75rem;
    padding          : 0.75rem;
    border-radius    : 0.5rem;
    text-decoration  : none;
    transition       : background-color 150ms ease-in-out;
    border           : none;
    background-color : transparent;
    cursor           : pointer;
}

.dashboard-sidebar .active-link {
    background-color : #eff6ff;
    color            : #1d4ed8;
    font-weight      : 500;
}

.dashboard-sidebar .normal-link {
    color : #4b5563;
}

.dashboard-sidebar .normal-link:hover {
    background-color : #f3f4f6;
}

.dashboard-sidebar .logout-btn {
    color : #dc2626;
}

.dashboard-sidebar .logout-btn:hover {
    background-color : #fee2e2;
}

.dashboard-sidebar i {
    width : 1.25rem;
}

.dashboard-content {
    flex-grow : 1;
}

.welcome-panel {
    background-color : white;
    border-radius    : 0.75rem;
    box-shadow       : 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding          : 1.5rem 2.5rem;
    margin-bottom    : 2rem;
}

.welcome-panel h1 {
    font-size     : 2.25rem;
    font-weight   : 800;
    color         : #1f2937;
    margin-bottom : 0.5rem;
}

.welcome-panel p {
    color : #6b7280;
}

.saved-list-panel {
    background-color : white;
    border-radius    : 0.75rem;
    box-shadow       : 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding          : 1.5rem 2.5rem;
}

.saved-list-panel h2 {
    font-size      : 1.5rem;
    font-weight    : 700;
    color          : #1f2937;
    margin-bottom  : 1.5rem;
    border-bottom  : 1px solid #e5e7eb;
    padding-bottom : 0.75rem;
}

.saved-item {
    display          : flex;
    align-items      : center;
    background-color : #f9fafb;
    padding          : 1rem;
    border-radius    : 0.75rem;
    border           : 1px solid #f3f4f6;
    transition       : box-shadow 150ms ease-in-out;
}

.saved-item:hover {
    box-shadow : 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.text-white {
    color : #fff !important;
}

.saved-item img {
    width         : 5rem;
    height        : 3.5rem;
    object-fit    : cover;
    border-radius : 0.5rem;
    margin-right  : 1rem;
    border        : 1px solid #e5e7eb;
}

.saved-item-info {
    flex-grow : 1;
    min-width : 0;
}

.saved-item-info p:first-child {
    font-size     : 1.125rem;
    font-weight   : 600;
    color         : #1f2937;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.saved-item-info p:last-child {
    font-size : 0.875rem;
    color     : #6b7280;
}

.saved-item-info i {
    margin-right : 0.25rem;
}

.remove-btn {
    display          : flex;
    align-items      : center;
    margin-left      : 1rem;
    padding          : 0.5rem 1rem;
    font-size        : 0.875rem;
    font-weight      : 500;
    border-radius    : 0.5rem;
    color            : #dc2626;
    border           : 1px solid #dc2626;
    background-color : white;
    transition       : all 150ms ease-in-out;
    cursor           : pointer;
}

.remove-btn:hover {
    background-color : #dc2626;
    color            : white;
}

.remove-btn i {
    margin-right : 0.5rem;
}

.text-decoration-none {
    text-decoration : none;
}

.text-primary {
    color : var(--primary-color);
}

.mt-0 {
    margin-top : 0;
}

.website-link {
    display         : flex;
    margin-top      : 20px;
    justify-content : space-between;
    align-items     : center;
    flex-direction  : row;
}

.website-link a {
    background      : var(--primary-color);
    color           : #fff;
    text-decoration : none;
    border-radius   : 0.5rem;
    padding         : 0.375rem 0.75rem;
    font-size       : 0.875rem;
}

.success-message {
    padding       : 10px;
    background    : #d1fae5;
    color         : #065f46;
    border-radius : 5px;
}

.error-message {
    color : #b91c1c; background : #fee2e2; padding : 10px; border-radius : 4px; margin-bottom : 1rem; font-size : 0.875rem;
}

#saved-university-list {
    display : flex; flex-direction : column; gap : 1rem;
}

.saved-card {
    display : flex; justify-content : space-between; align-items : center; background : #fff; padding : 1.25rem; border-radius : 10px; border : 1px solid #e5e7eb; box-shadow : 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (min-width : 640px) {
    .university-grid {
        grid-template-columns : repeat(2, 1fr);
    }
}

@media (min-width : 768px) {
    .nav-links {
        display : flex;
        gap     : 1.5rem;
    }
    
    .dashboard-btn {
        display     : inline-flex;
        align-items : center;
    }
    
    .nav-buttons {
        display         : flex;
        gap             : 1rem;
        justify-content : center;
        align-items     : center;
    }
    
    .auth-card {
        flex-direction : row;
    }
    
    .auth-image-panel,
    .auth-form-panel {
        width : 50%;
    }
    
    .dashboard-layout {
        flex-direction : row;
    }
    
    .dashboard-sidebar {
        width    : 16rem; /* md:w-64 */
        position : sticky;
        top      : 5rem; /* top-20 */
    }
    
    .footer-content {
        grid-template-columns : 1.5fr repeat(4, 1fr);
    }
}

@media (min-width : 1024px) {
    .university-grid {
        grid-template-columns : repeat(4, 1fr);
    }
}