:root{
    --gt-bg:#f4f6fb;
    --gt-card:#ffffff;
    --gt-ink:#111827;
    --gt-muted:#7c8698;
    --gt-border:#e4e8f0;
    --gt-navy:#0a1120;
    --gt-navy-2:#111b2f;
    --gt-blue:#2f7bff;
    --gt-indigo:#596cff;
    --gt-violet:#8b5cff;
    --gt-success:#2abf8a;
    --gt-danger:#c84a5d;
    --gt-warning:#b1822e;
}

*{box-sizing:border-box}

html,body{
    margin:0;
    min-height:100%;
}

body{
    min-height:100vh;
    color:var(--gt-ink);
    background:var(--gt-bg);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    font-size:16px;
}

button,input,select,textarea{font:inherit}

svg{
    display:block;
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* =========================================================
   PAGE LAYOUT
========================================================= */

.gt-school-login-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(430px,44%) minmax(0,56%);
}

.gt-school-brand-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:40px 52px 34px;
    color:#fff;
    background:
        linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
        radial-gradient(circle at 75% 16%,rgba(84,101,255,.17),transparent 27%),
        radial-gradient(circle at 8% 88%,rgba(139,92,255,.10),transparent 30%),
        linear-gradient(145deg,#080d17 0%,#0b1323 48%,#101a2e 100%);
    background-size:44px 44px,44px 44px,auto,auto,auto;
}

.gt-school-brand-panel::after{
    content:"";
    position:absolute;
    right:-170px;
    bottom:-190px;
    width:460px;
    height:460px;
    border:1px solid rgba(115,130,255,.08);
    border-radius:50%;
    box-shadow:
        0 0 0 60px rgba(110,122,255,.025),
        0 0 0 120px rgba(110,122,255,.018);
    pointer-events:none;
}

.gt-school-brand-top,
.gt-school-brand-content,
.gt-brand-footer{
    position:relative;
    z-index:2;
}

.gt-school-brand-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.gt-growtech-brand{
    display:flex;
    align-items:center;
    gap:14px;
    color:#fff;
    text-decoration:none;
}

.gt-growtech-mark{
    width:52px;
    height:52px;
    flex:0 0 52px;
}

.gt-growtech-mark svg{stroke:none}

.gt-growtech-brand strong,
.gt-growtech-brand small{
    display:block;
}

.gt-growtech-brand strong{
    font-size:21px;
    font-weight:850;
    letter-spacing:-.035em;
}

.gt-growtech-brand small{
    margin-top:4px;
    color:rgba(255,255,255,.42);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
}

.gt-security-chip{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;
    color:rgba(255,255,255,.62);
    background:rgba(255,255,255,.03);
    font-size:11px;
    font-weight:700;
}

.gt-security-chip i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3bd09c;
    box-shadow:0 0 0 5px rgba(59,208,156,.07);
}

.gt-school-brand-content{
    width:min(100%,680px);
    margin:auto 0;
    padding:70px 0 58px;
}

.gt-brand-overline{
    margin-bottom:20px;
    color:#8190ff;
    font-size:12px;
    font-weight:850;
    letter-spacing:.16em;
}

.gt-school-brand-content h1{
    max-width:650px;
    margin:0;
    color:#f9fbff;
    font-size:clamp(42px,4vw,64px);
    line-height:1.02;
    letter-spacing:-.055em;
}

.gt-school-brand-content h1 span{
    display:block;
    margin-top:8px;
    background:linear-gradient(100deg,#6b98ff,#7c83ff 48%,#aa76ff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.gt-school-brand-content>p{
    max-width:610px;
    margin:26px 0 0;
    color:rgba(226,233,246,.58);
    font-size:16px;
    line-height:1.8;
}

.gt-feature-grid{
    display:grid;
    gap:12px;
    max-width:610px;
    margin-top:38px;
}

.gt-feature-grid article{
    min-height:76px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:15px;
    background:rgba(255,255,255,.03);
}

.gt-feature-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    padding:10px;
    border-radius:11px;
    color:#8f9cff;
    background:rgba(95,109,255,.09);
}

.gt-feature-grid strong,
.gt-feature-grid small{
    display:block;
}

.gt-feature-grid strong{
    color:rgba(245,248,255,.88);
    font-size:14px;
    font-weight:740;
}

.gt-feature-grid small{
    margin-top:5px;
    color:rgba(226,233,246,.42);
    font-size:12px;
    line-height:1.55;
}

.gt-brand-footer{
    display:flex;
    justify-content:space-between;
    gap:22px;
    color:rgba(255,255,255,.28);
    font-size:10px;
    font-weight:600;
}

/* =========================================================
   RIGHT SIDE
========================================================= */

.gt-school-login-side{
    position:relative;
    display:grid;
    place-items:center;
    min-width:0;
    padding:46px;
    background:
        radial-gradient(circle at 85% 14%,rgba(91,108,255,.06),transparent 22%),
        linear-gradient(180deg,#fafbfe,#f4f6fb);
}

.gt-school-login-card{
    width:min(100%,610px);
    padding:36px 38px 32px;
    border:1px solid rgba(225,229,237,.98);
    border-radius:24px;
    background:#fff;
    box-shadow:
        0 28px 80px rgba(25,35,60,.10),
        0 5px 18px rgba(25,35,60,.035);
}

.gt-school-context{
    display:flex;
    align-items:center;
    gap:16px;
    padding-bottom:24px;
    border-bottom:1px solid #edf0f4;
}

.gt-school-logo{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    flex:0 0 62px;
    overflow:hidden;
    border:1px solid #e3e7ef;
    border-radius:16px;
    color:#5b68df;
    background:linear-gradient(145deg,#f1f4ff,#f8f6ff);
    font-size:21px;
    font-weight:850;
}

.gt-school-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:6px;
}

.gt-school-context-copy{
    min-width:0;
    flex:1;
}

.gt-school-context-copy>small,
.gt-school-context-copy>strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.gt-school-context-copy>small{
    color:#9ca5b3;
    font-size:10px;
    font-weight:850;
    letter-spacing:.12em;
}

.gt-school-context-copy>strong{
    margin-top:6px;
    color:#263044;
    font-size:16px;
    font-weight:770;
}

.gt-school-context-copy>span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:7px;
    color:#4c9a7d;
    font-size:10px;
    font-weight:700;
}

.gt-school-context-copy>span i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#34c892;
}

.gt-school-context-copy>span.is-danger{
    color:#b65060;
}

.gt-school-context-copy>span.is-danger i{
    background:#d85b6f;
}

/* =========================================================
   HEADING
========================================================= */

.gt-login-heading{
    padding:30px 0 24px;
}

.gt-login-overline{
    color:#6876e6;
    font-size:10px;
    font-weight:850;
    letter-spacing:.14em;
}

.gt-login-heading h2{
    margin:9px 0 0;
    color:#121827;
    font-size:38px;
    line-height:1.08;
    letter-spacing:-.045em;
}

.gt-login-heading p{
    margin:10px 0 0;
    color:#8892a2;
    font-size:14px;
    line-height:1.65;
}

/* =========================================================
   WORKSPACE SELECTOR
========================================================= */

.gt-workspace-select{
    margin-bottom:22px;
    padding:18px;
    border:1px solid #e4e8f0;
    border-radius:16px;
    background:linear-gradient(180deg,#fbfcff,#f8f9fc);
}

.gt-workspace-select-head{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:17px;
}

.gt-workspace-select-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:grid;
    place-items:center;
    padding:10px;
    border-radius:11px;
    color:#6272e7;
    background:#eef1ff;
}

.gt-workspace-select-head strong,
.gt-workspace-select-head small{
    display:block;
}

.gt-workspace-select-head strong{
    color:#354055;
    font-size:14px;
    font-weight:760;
}

.gt-workspace-select-head small{
    margin-top:4px;
    color:#939cab;
    font-size:12px;
    line-height:1.5;
}

.gt-workspace-form{
    display:grid;
    gap:12px;
}

.gt-workspace-form label>span{
    display:block;
    margin-bottom:8px;
    color:#5b6576;
    font-size:12px;
    font-weight:720;
}

.gt-workspace-input{
    min-height:56px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid #dfe4ec;
    border-radius:12px;
    background:#fff;
}

.gt-workspace-input>span{
    height:54px;
    display:flex;
    align-items:center;
    padding:0 14px;
    border-right:1px solid #edf0f4;
    color:#929cab;
    background:#f8f9fb;
    font-size:11px;
    white-space:nowrap;
}

.gt-workspace-input input{
    min-width:0;
    height:54px;
    flex:1;
    padding:0 14px;
    border:0;
    outline:0;
    color:#364154;
    background:#fff;
    font-size:14px;
}

.gt-workspace-form button{
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(105deg,var(--gt-blue),var(--gt-indigo) 55%,var(--gt-violet));
    box-shadow:0 10px 22px rgba(81,98,226,.18);
    cursor:pointer;
    font-size:14px;
    font-weight:750;
}

.gt-workspace-form button svg{
    width:16px;
    height:16px;
}

.gt-workspace-help{
    margin:11px 0 0;
    color:#9ba4b2;
    font-size:11px;
    text-align:center;
}

.gt-workspace-help strong{
    color:#707b8d;
}

/* =========================================================
   ALERTS
========================================================= */

.gt-login-alert{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:18px;
    padding:14px 15px;
    border:1px solid;
    border-radius:12px;
}

.gt-login-alert>span{
    width:22px;
    height:22px;
    flex:0 0 22px;
}

.gt-login-alert strong,
.gt-login-alert small{
    display:block;
}

.gt-login-alert strong{
    font-size:13px;
    font-weight:760;
}

.gt-login-alert small{
    margin-top:4px;
    font-size:12px;
    line-height:1.55;
}

.gt-login-alert.is-warning{
    color:#9c742b;
    border-color:#f0e4c9;
    background:#fffaf0;
}

.gt-login-alert.is-danger{
    color:#b44b5c;
    border-color:#f2dce1;
    background:#fff7f8;
}

/* =========================================================
   LOGIN FORM
========================================================= */

.gt-login-form{
    display:grid;
    gap:19px;
}

.gt-field{
    display:grid;
    gap:9px;
}

.gt-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.gt-label-row strong{
    color:#4b5567;
    font-size:13px;
    font-weight:730;
}

.gt-label-row small{
    color:#9ba4b2;
    font-size:11px;
}

.gt-label-row a{
    color:#6675e7;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
}

.gt-input{
    position:relative;
    height:58px;
    display:flex;
    align-items:center;
    border:1px solid #dfe4ec;
    border-radius:13px;
    background:#fbfcfd;
    transition:.14s ease;
}

.gt-input:focus-within{
    border-color:#8090f1;
    background:#fff;
    box-shadow:0 0 0 4px rgba(89,108,255,.08);
}

.gt-input>i{
    width:20px;
    height:20px;
    margin-left:16px;
    flex:0 0 20px;
    color:#8993a5;
}

.gt-input input{
    min-width:0;
    height:100%;
    flex:1;
    padding:0 15px;
    border:0;
    outline:0;
    color:#2f3849;
    background:transparent;
    font-size:14px;
}

.gt-input input::placeholder{
    color:#aab2bf;
}

.gt-input input:disabled{
    cursor:not-allowed;
    opacity:.6;
}

.gt-password-toggle{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    margin-right:7px;
    padding:11px;
    border:0;
    border-radius:10px;
    color:#949dab;
    background:transparent;
    cursor:pointer;
}

.gt-password-toggle:hover{
    color:#5f6edf;
    background:#f1f3ff;
}

.gt-eye-closed{display:none}
.gt-password-toggle.is-visible .gt-eye-open{display:none}
.gt-password-toggle.is-visible .gt-eye-closed{display:block}

.gt-remember{
    display:flex;
    align-items:center;
    gap:10px;
    color:#7c8697;
    font-size:12px;
    cursor:pointer;
}

.gt-remember input{
    width:17px;
    height:17px;
    margin:0;
    accent-color:#6574e7;
}

.gt-signin-button{
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:2px;
    border:0;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(105deg,var(--gt-blue),var(--gt-indigo) 55%,var(--gt-violet));
    box-shadow:0 12px 28px rgba(81,98,226,.21);
    cursor:pointer;
    font-size:14px;
    font-weight:760;
    letter-spacing:.005em;
    transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease;
}

.gt-signin-button:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 15px 32px rgba(81,98,226,.25);
}

.gt-signin-button:disabled{
    cursor:not-allowed;
    opacity:.45;
    box-shadow:none;
}

.gt-signin-button svg{
    width:17px;
    height:17px;
}

/* =========================================================
   SECURITY / FOOTER
========================================================= */

.gt-login-security{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-top:24px;
    padding:14px;
    border-radius:12px;
    background:#f8f9fb;
}

.gt-login-security>span{
    width:25px;
    height:25px;
    flex:0 0 25px;
    padding:3px;
    color:#43aa86;
}

.gt-login-security strong,
.gt-login-security small{
    display:block;
}

.gt-login-security strong{
    color:#596375;
    font-size:12px;
}

.gt-login-security small{
    margin-top:4px;
    color:#98a1ae;
    font-size:11px;
    line-height:1.5;
}

.gt-login-foot{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:19px;
    color:#9fa7b4;
    font-size:11px;
}

.gt-login-foot a{
    color:#6876e6;
    font-weight:720;
    text-decoration:none;
}

.gt-login-mobile-brand{
    display:none;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1180px){
    .gt-school-login-shell{
        grid-template-columns:minmax(360px,40%) minmax(0,60%);
    }

    .gt-school-brand-panel{
        padding-left:34px;
        padding-right:34px;
    }

    .gt-school-brand-content h1{
        font-size:46px;
    }

    .gt-school-brand-content>p{
        font-size:14px;
    }

    .gt-feature-grid article{
        min-height:68px;
    }

    .gt-school-login-side{
        padding:32px;
    }

    .gt-school-login-card{
        width:min(100%,560px);
        padding:32px;
    }
}

@media(max-width:900px){
    .gt-school-login-shell{
        grid-template-columns:36% 64%;
    }

    .gt-school-brand-panel{
        padding:28px 24px;
    }

    .gt-growtech-brand strong{font-size:17px}
    .gt-growtech-brand small{font-size:9px}
    .gt-security-chip{display:none}
    .gt-school-brand-content h1{font-size:38px}
    .gt-school-brand-content>p{font-size:13px}
    .gt-feature-grid article:nth-child(3){display:none}

    .gt-school-login-card{
        padding:28px;
    }
}

@media(max-width:720px){
    .gt-school-login-shell{
        display:block;
    }

    .gt-school-brand-panel{
        display:none;
    }

    .gt-school-login-side{
        min-height:100vh;
        padding:24px;
    }

    .gt-school-login-card{
        width:min(100%,560px);
    }

    .gt-login-mobile-brand{
        position:absolute;
        bottom:15px;
        display:block;
        color:#a2a9b6;
        font-size:11px;
    }

    .gt-login-mobile-brand strong{
        color:#6774e4;
    }
}

@media(max-width:520px){
    .gt-school-login-side{
        display:block;
        padding:0;
        background:#fff;
    }

    .gt-school-login-card{
        width:100%;
        min-height:100vh;
        padding:24px 20px 72px;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .gt-school-logo{
        width:54px;
        height:54px;
        flex-basis:54px;
    }

    .gt-login-heading h2{
        font-size:32px;
    }

    .gt-login-heading p{
        font-size:13px;
    }

    .gt-label-row small{
        display:none;
    }

    .gt-input{
        height:56px;
    }

    .gt-workspace-input{
        display:block;
    }

    .gt-workspace-input>span{
        height:auto;
        padding:9px 12px;
        border-right:0;
        border-bottom:1px solid #edf0f4;
    }

    .gt-workspace-input input{
        width:100%;
    }
}