*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --purple: #7c3aed;
    --pink: #ec4899;
    --dark: #0f0a1e;
    --accent: #7c3aed
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--dark);
    min-height: 100vh;
    display: flex;
    overflow: hidden
}

/* ── LEFT PANEL ── */
.left {
    flex: 1.1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0f0a1e 0%, #1a0533 50%, #0d0d2b 100%)
}

.mesh {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(124, 58, 237, .35) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 70%, rgba(236, 72, 153, .25) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 50% 10%, rgba(99, 102, 241, .2) 0%, transparent 55%);
    animation: meshPulse 8s ease-in-out infinite alternate
}

@keyframes meshPulse {
    0% {
        opacity: .7;
        transform: scale(1) rotate(0deg)
    }

    100% {
        opacity: 1;
        transform: scale(1.05) rotate(2deg)
    }
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: float linear infinite
}

.orb1 {
    width: 300px;
    height: 300px;
    background: rgba(124, 58, 237, .5);
    top: -80px;
    left: -80px;
    animation-duration: 12s
}

.orb2 {
    width: 200px;
    height: 200px;
    background: rgba(236, 72, 153, .4);
    bottom: -60px;
    right: -40px;
    animation-duration: 9s;
    animation-delay: -3s
}

.orb3 {
    width: 150px;
    height: 150px;
    background: rgba(99, 102, 241, .5);
    top: 50%;
    left: 60%;
    animation-duration: 15s;
    animation-delay: -6s
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    25% {
        transform: translate(30px, -40px) scale(1.1)
    }

    50% {
        transform: translate(-20px, 20px) scale(.95)
    }

    75% {
        transform: translate(20px, 40px) scale(1.05)
    }
}

.ring-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px
}

.ring {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--accent), #ec4899, #6366f1, var(--accent));
    animation: spin 4s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), white calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), white calc(100% - 4px))
}

.ring::after {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, rgba(124, 58, 237, .3), rgba(236, 72, 153, .2), transparent);
    animation: spin 8s linear infinite reverse;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 3px))
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.ring-inner {
    width: 172px;
    height: 172px;
    background: rgba(124, 58, 237, .12);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.ring-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: opacity .4s
}

.grid-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 20s linear infinite
}

@keyframes gridMove {
    to {
        background-position: 60px 60px
    }
}

.particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: particleRise linear infinite
}

@keyframes particleRise {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0)
    }

    20% {
        opacity: .8;
        transform: translateY(-30px) scale(1)
    }

    100% {
        opacity: 0;
        transform: translateY(-200px) scale(.3)
    }
}

.left-text {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 40px
}

.left-text h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 2.6vw, 38px);
    color: #fff;
    line-height: 1.2;
    margin-bottom: 12px
}

.left-text h1 span {
    background: linear-gradient(90deg, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.left-text p {
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    line-height: 1.7;
    max-width: 400px;
    margin: 0 auto
}

/* ── RIGHT PANEL ── */
.right {
    flex: .9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d0924;
    position: relative;
    overflow: hidden;
    overflow-y: auto
}

.right::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, .12) 0%, transparent 70%)
}

.right::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 72, 153, .1) 0%, transparent 70%)
}

.login-card {
    position: relative;
    z-index: 2;
    width: min(400px, 90%);
    padding: 28px 0;
    animation: cardIn .8s cubic-bezier(.16, 1, .3, 1) both
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(40px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.login-header {
    margin-bottom: 28px
}

.login-header .tag {
    display: inline-block;
    background: rgba(124, 58, 237, .2);
    border: 1px solid rgba(124, 58, 237, .4);
    color: #a78bfa;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 14px
}

.login-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 6px
}

.login-header p {
    color: rgba(255, 255, 255, .4);
    font-size: 14px
}

/* ── COLLEGE SELECTOR ── */
.college-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase
}

.college-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px
}

.college-card {
    background: rgba(255, 255, 255, .04);
    border: 1.5px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all .25s;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden
}

.college-card:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    transform: translateY(-1px)
}

.college-card.selected {
    border-color: var(--accent);
    background: rgba(124, 58, 237, .12);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, .2)
}

.college-card .c-emoji {
    font-size: 18px;
    flex-shrink: 0;
    color:#ffff
}

.college-card .c-name {
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
    font-weight: 500;
    line-height: 1.3
}

.college-card .c-check {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: white
}

.college-card.selected .c-check {
    display: flex
}

.college-hint {
    font-size: 12px;
    color: rgba(255, 107, 107, .8);
    margin-bottom: 16px;
    display: none
}

.college-hint.show {
    display: block
}

/* ── ALERT ── */
.alert-box {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
    animation: alertSlide .4s cubic-bezier(.16, 1, .3, 1) both
}

@keyframes alertSlide {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.alert-box .alert-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px
}

.alert-box .alert-text strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px
}

.alert-box .alert-text span {
    font-size: 12px;
    opacity: .8
}

.alert-box.info {
    background: rgba(124, 58, 237, .12);
    border: 1px solid rgba(124, 58, 237, .3);
    color: #a78bfa
}

/* ── FORM ── */
.input-group {
    margin-bottom: 18px
}

.input-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 8px;
    text-transform: uppercase
}

.input-group .input-wrap {
    position: relative
}

.input-group .icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: .4;
    pointer-events: none
}

.input-group input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    outline: none;
    transition: all .3s
}

.input-group input::placeholder {
    color: rgba(255, 255, 255, .25)
}

.input-group input:focus {
    border-color: rgba(124, 58, 237, .6);
    background: rgba(124, 58, 237, .08);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12), 0 0 20px rgba(124, 58, 237, .1)
}

.input-group input.input-error {
    border-color: rgba(239, 68, 68, .5) !important;
    background: rgba(239, 68, 68, .05) !important
}

.eye-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    opacity: .4;
    color: white;
    padding: 4px;
    transition: opacity .2s
}

.eye-btn:hover {
    opacity: .8
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px
}

.remember {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

.remember input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255, 255, 255, .25);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    flex-shrink: 0
}

.remember input[type="checkbox"]:checked {
    background: var(--purple);
    border-color: var(--purple)
}

.remember input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 11px
}

.remember span {
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
    user-select: none
}

.forgot {
    font-size: 13px;
    color: #a78bfa;
    text-decoration: none;
    transition: color .2s
}

.forgot:hover {
    color: #f472b6
}

.cookie-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(167, 139, 250, .7);
    margin-top: -8px;
    margin-bottom: 14px
}

.cookie-hint .dot {
    width: 6px;
    height: 6px;
    background: #a78bfa;
    border-radius: 50%;
    animation: blink 2s infinite
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

.btn-login {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--accent), #ec4899);
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .3s;
    letter-spacing: .5px
}

.btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #6d28d9, #db2777);
    opacity: 0;
    transition: opacity .3s
}

.btn-login:hover::before {
    opacity: 1
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(124, 58, 237, .4)
}

.btn-login span {
    position: relative;
    z-index: 1
}

.session-notice {
    margin-top: 18px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .25)
}

/* ── POPUPS ── */
.error-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 2, 20, .82);
    backdrop-filter: blur(14px);
    animation: overlayIn .35s ease both
}

@keyframes overlayIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.error-card {
    border-radius: 26px;
    padding: 44px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: 400px;
    width: 90%;
    animation: cardPop .5s cubic-bezier(.16, 1, .3, 1) .05s both
}

@keyframes cardPop {
    from {
        opacity: 0;
        transform: scale(.75) translateY(40px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.error-card.type-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, .15), rgba(220, 38, 38, .08));
    border: 1px solid rgba(239, 68, 68, .45);
    box-shadow: 0 0 70px rgba(239, 68, 68, .2), 0 40px 80px rgba(0, 0, 0, .5)
}

.error-card.type-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, .15), rgba(217, 119, 6, .08));
    border: 1px solid rgba(245, 158, 11, .45);
    box-shadow: 0 0 70px rgba(245, 158, 11, .2), 0 40px 80px rgba(0, 0, 0, .5)
}

.error-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none
}

.error-card.type-error::before {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(239, 68, 68, .25), transparent 70%)
}

.error-card.type-warning::before {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 158, 11, .25), transparent 70%)
}

.error-icon-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 24px
}

.error-icon-wrap::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    animation: spin 2.5s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 3px))
}

.type-error .error-icon-wrap::before {
    background: conic-gradient(from 0deg, #ef4444, #f87171, #fca5a5, #ef4444)
}

.type-warning .error-icon-wrap::before {
    background: conic-gradient(from 0deg, #f59e0b, #fbbf24, #fde68a, #f59e0b)
}

.error-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    position: relative;
    z-index: 1;
    animation: iconBounce .7s cubic-bezier(.16, 1, .3, 1) .2s both
}

@keyframes iconBounce {
    from {
        transform: scale(0) rotate(-180deg)
    }

    to {
        transform: scale(1) rotate(0deg)
    }
}

.type-error .error-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 0 50px rgba(239, 68, 68, .6)
}

.type-warning .error-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 0 50px rgba(245, 158, 11, .6)
}

.error-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    color: #fff;
    margin-bottom: 10px;
    animation: fadeUp .5s ease .4s both
}

.error-card .sub {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 28px;
    animation: fadeUp .5s ease .5s both
}

.type-error .sub {
    color: rgba(252, 165, 165, .8)
}

.type-warning .sub {
    color: rgba(253, 211, 77, .8)
}

.btn-close-popup {
    padding: 13px 36px;
    border: none;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .25s;
    animation: fadeUp .5s ease .6s both
}

.type-error .btn-close-popup {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 8px 24px rgba(239, 68, 68, .4)
}

.type-warning .btn-close-popup {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 8px 24px rgba(245, 158, 11, .4)
}

.btn-close-popup:hover {
    transform: translateY(-2px);
    filter: brightness(1.1)
}

.shake {
    animation: shake .5s cubic-bezier(.36, .07, .19, .97) both !important
}

@keyframes shake {

    10%,
    90% {
        transform: translateX(-2px)
    }

    20%,
    80% {
        transform: translateX(4px)
    }

    30%,
    50%,
    70% {
        transform: translateX(-6px)
    }

    40%,
    60% {
        transform: translateX(6px)
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ── SUCCESS ── */
.success-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 2, 20, .88);
    backdrop-filter: blur(16px);
    animation: overlayIn .5s ease both
}

.success-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(236, 72, 153, .12));
    border: 1px solid rgba(124, 58, 237, .5);
    border-radius: 28px;
    padding: 50px 54px;
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: 420px;
    width: 90%;
    animation: cardPop .6s cubic-bezier(.16, 1, .3, 1) .1s both;
    box-shadow: 0 0 80px rgba(124, 58, 237, .25), 0 40px 80px rgba(0, 0, 0, .5)
}

.success-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(124, 58, 237, .3), transparent 70%);
    pointer-events: none
}

.icon-ring-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 26px
}

.icon-ring-wrap::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #7c3aed, #ec4899, #6366f1, #7c3aed);
    animation: spin 2s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 3px))
}

.success-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 0 50px rgba(124, 58, 237, .7);
    animation: iconBounce .7s cubic-bezier(.16, 1, .3, 1) .3s both;
    position: relative;
    z-index: 1
}

.success-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: #fff;
    margin-bottom: 10px;
    animation: fadeUp .5s ease .5s both
}

.success-card .sub {
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 28px;
    animation: fadeUp .5s ease .6s both
}

.progress-wrap {
    background: rgba(255, 255, 255, .08);
    border-radius: 100px;
    height: 5px;
    overflow: hidden;
    margin-bottom: 12px;
    animation: fadeUp .5s ease .7s both
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #ec4899, #f472b6);
    border-radius: 100px;
    animation: progressShrink 2.5s linear .8s forwards;
    width: 100%
}

@keyframes progressShrink {
    from {
        width: 100%
    }

    to {
        width: 0%
    }
}

.redirect-text {
    font-size: 12px;
    color: rgba(167, 139, 250, .7);
    letter-spacing: .5px;
    animation: fadeUp .5s ease .8s both
}

.shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .04) 50%, transparent 60%);
    animation: shimmerMove 3s ease-in-out infinite;
    pointer-events: none
}

@keyframes shimmerMove {

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

    50% {
        transform: translateX(100%)
    }
}

.confetti-piece {
    position: absolute;
    border-radius: 2px;
    animation: confettiFall linear forwards;
    pointer-events: none
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(-10px) rotate(0deg) scale(1)
    }

    100% {
        opacity: 0;
        transform: translateY(350px) rotate(720deg) scale(.5)
    }
}

#mouseCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999
}

@media(max-width:768px) {
    .left {
        display: none
    }

    .right {
        flex: 1
    }
}

@media(max-width:480px) {
    .college-grid {
        grid-template-columns: 1fr
    }
}

.row {
    display: flex;
    align-items: center;
    margin: 16px 0;
}
.forgot-link {
    color: #a78bfa;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.forgot-link:hover {
    color: #f472b6;
    text-decoration: underline;
}