*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:#162033;background:#f4f7fb}a{color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;background:#0f1f3d;color:#fff;padding:22px 16px;position:fixed;inset:0 auto 0 0;overflow-y:auto}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;padding:4px 8px 22px}.brand-logo{width:64px;height:52px;object-fit:contain;flex:0 0 auto}.brand strong,.brand small,.user-chip strong,.user-chip small{display:block}.brand small{color:#a9b6cc;margin-top:3px;font-size:11px}.nav{display:grid;gap:5px}.nav>a{padding:11px 12px;border-radius:9px;text-decoration:none;color:#dbe5f4}.nav>a:hover{background:#172d55;color:#fff}.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#8395b4;padding:18px 12px 5px}.main{margin-left:250px;width:calc(100% - 250px)}.topbar{height:86px;background:#fff;border-bottom:1px solid #e5eaf1;display:flex;justify-content:space-between;align-items:center;padding:16px 30px;position:sticky;top:0;z-index:5}.topbar h1{margin:0;font-size:22px}.topbar p{margin:4px 0 0;color:#667085;font-size:13px}.user-chip{display:flex;gap:10px;align-items:center}.user-chip small{color:#7b8797;margin-top:2px;font-size:11px}.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e7efff;color:#1d4ed8;font-weight:800}.content{padding:26px 30px}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.card,.panel{background:#fff;border:1px solid #e5eaf1;border-radius:14px;box-shadow:0 4px 18px rgba(20,38,70,.04)}.card{padding:20px}.stat span,.stat small{display:block;color:#667085}.stat strong{display:block;font-size:30px;margin:9px 0 6px}.stat small{font-size:12px}.action-card{text-decoration:none;background:#1e5eff;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:8px}.action-card span{font-size:13px;color:#dbe7ff}.panel{padding:20px}.panel.narrow{max-width:850px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.panel-head h2{margin:0;font-size:18px}.panel-head p{margin:5px 0 0;color:#667085;font-size:13px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:#667085;font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:#f8fafc}th,td{padding:13px 12px;border-bottom:1px solid #edf1f6;vertical-align:middle}tbody tr:hover{background:#fbfdff}.subtext{display:block;color:#7b8797;font-size:11px;margin-top:3px}.file-badge{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#eef4ff;color:#1d4ed8;font-weight:800;margin-right:8px}.status{display:inline-block;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}.status.new{background:#fff3cd;color:#8a6300}.status.viewed{background:#e6f0ff;color:#1857b6}.status.downloaded,.status.active{background:#e7f7ed;color:#1d6b37}.status.inactive{background:#f4e8ea;color:#922d3a}.actions{display:flex;align-items:center;gap:10px;white-space:nowrap}.actions>a,.link-btn{color:#1d4ed8;text-decoration:none;font-weight:650;background:none;border:0;padding:0;cursor:pointer;font:inherit}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid.one{grid-template-columns:1fr}.form-grid label{font-size:12px;font-weight:700;color:#344054}.form-grid input,.form-grid select,.form-grid textarea,.search input,.mini-form input{width:100%;margin-top:7px;padding:11px 12px;border:1px solid #d6dde8;border-radius:9px;background:#fff;color:#172033;font:inherit;outline:none}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.search input:focus{border-color:#4d7df3;box-shadow:0 0 0 3px #edf2ff}.full{grid-column:1/-1}.upload-box{padding:18px;border:1px dashed #aebbd0;border-radius:12px;background:#fafcff}.upload-box input{background:#fff}.upload-box span{display:block;color:#667085;font-weight:400;margin-top:8px}.form-actions{display:flex;justify-content:flex-end;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:10px 15px;text-decoration:none;font-weight:700;font-size:13px;cursor:pointer}.btn.primary{background:#2563eb;color:white}.btn.secondary{background:#eef2f7;color:#344054}.btn.tiny{padding:7px 9px}.alert{padding:12px 14px;border-radius:10px;margin-bottom:18px;font-size:13px}.alert.success{background:#eaf8ef;color:#176436;border:1px solid #cdeed9}.alert.error{background:#fff0f1;color:#8f2834;border:1px solid #f2ccd1}.empty{text-align:center;color:#7b8797;padding:28px}.search{display:flex;gap:8px;align-items:center}.search input{margin:0;min-width:250px}.two-col{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:18px;align-items:start}.two-col.wide-left{grid-template-columns:minmax(0,2.3fr) minmax(330px,1fr)}details summary{cursor:pointer;color:#1d4ed8;font-weight:650}.mini-form{display:flex;gap:6px;margin-top:8px}.mini-form input{margin:0;min-width:140px}.login-body{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#f2f6ff,#eef3f8);padding:20px}.login-video-bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.login-video-overlay{position:fixed;inset:0;background:rgba(7,18,38,.40);z-index:1;pointer-events:none}.login-card{position:relative;z-index:2;width:min(440px,100%);background:rgba(255,255,255,.96);padding:30px;border-radius:18px;box-shadow:0 24px 70px rgba(17,35,68,.28);border:1px solid rgba(232,237,244,.95);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.login-brand{display:flex;gap:13px;align-items:center;margin-bottom:24px}.login-brand-logo{width:78px;height:62px;object-fit:contain;flex:0 0 auto}.login-brand h1{font-size:20px;margin:0}.login-brand p{font-size:12px;color:#667085;margin:4px 0 0}.login-note{font-size:11px;color:#7b8797;text-align:center;margin:18px 0 0}@media(max-width:1000px){.cards{grid-template-columns:1fr 1fr}.two-col,.two-col.wide-left{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{position:static;width:100%}.app-shell{display:block}.main{margin:0;width:100%}.topbar{position:static;padding:14px 18px}.content{padding:18px}.cards{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.user-chip span:last-child{display:none}.sidebar{padding-bottom:12px}.nav{grid-template-columns:1fr 1fr}.nav-label{grid-column:1/-1}.brand{padding-bottom:12px}}
/* =========================================================
   GLASSMORPHISM LOGIN DESIGN
   ========================================================= */

.login-body {
    margin: 0;
    padding: 20px;

    width: 100%;
    min-height: 100vh;

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

    position: relative;
    overflow: hidden;

    background: #0f1f3d;
}


/* =========================================================
   VIDEO BACKGROUND
   ========================================================= */

.login-video-bg {
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    object-fit: cover;
    object-position: center;

    z-index: 0;

    pointer-events: none;
}


/* =========================================================
   DARK OVERLAY
   Keeps text readable over bright video
   ========================================================= */

.login-video-overlay {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            rgba(3, 12, 28, 0.30),
            rgba(8, 29, 58, 0.16)
        );

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   GLASS LOGIN CARD
   ========================================================= */

.login-card {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 490px;

    padding: 38px;

    /* Transparent glass */
    background: rgba(255, 255, 255, 0.13);

    /* Frosted glass */
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);

    /* Glass border */
    border: 1px solid rgba(255, 255, 255, 0.30);

    border-radius: 24px;

    /* Floating glass effect */
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    color: #ffffff;
}


/* =========================================================
   BRAND AREA
   ========================================================= */

.login-brand {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 32px;
}


.login-brand-logo {
    width: 92px;
    height: auto;

    flex-shrink: 0;

    object-fit: contain;

    filter:
        drop-shadow(
            0 4px 8px
            rgba(0, 0, 0, 0.20)
        );
}


.login-brand h1 {
    margin: 0 0 5px;

    font-size: 27px;
    font-weight: 700;

    color: #ffffff;

    text-shadow:
        0 2px 5px
        rgba(0, 0, 0, 0.30);
}


.login-brand p {
    margin: 0;

    font-size: 14px;

    color: rgba(255, 255, 255, 0.80);
}


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

.login-card .form-grid {
    gap: 20px;
}


.login-card label {
    display: block;

    font-size: 14px;
    font-weight: 600;

    color: rgba(255, 255, 255, 0.95);
}


/* =========================================================
   GLASS INPUT FIELDS
   ========================================================= */

.login-card input[type="text"],
.login-card input[type="password"] {
    width: 100%;

    margin-top: 8px;

    padding: 14px 16px;

    min-height: 50px;

    box-sizing: border-box;

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

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

    border-radius: 13px;

    color: #ffffff;

    font-size: 15px;

    outline: none;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        inset 0 1px 2px
        rgba(255, 255, 255, 0.08);

    transition:
        border-color 0.20s ease,
        background 0.20s ease,
        box-shadow 0.20s ease,
        transform 0.20s ease;
}


.login-card input[type="text"]:hover,
.login-card input[type="password"]:hover {
    background: rgba(255, 255, 255, 0.20);
}


.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
    background: rgba(255, 255, 255, 0.23);

    border-color: rgba(255, 255, 255, 0.90);

    box-shadow:
        0 0 0 4px rgba(74, 144, 255, 0.20);

    transform: translateY(-1px);
}


/* Browser autofill correction */

.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;

    -webkit-box-shadow:
        0 0 0 1000px
        rgba(255, 255, 255, 0.16)
        inset;

    transition:
        background-color
        5000s ease-in-out 0s;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.login-card .btn.primary {
    width: 100%;

    min-height: 50px;

    margin-top: 2px;

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

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.95),
            rgba(30, 111, 230, 0.88)
        );

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 22px
        rgba(19, 73, 165, 0.35);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}


.login-card .btn.primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(19, 73, 165, 0.45);

    filter: brightness(1.06);
}


.login-card .btn.primary:active {
    transform: translateY(0);
}


/* =========================================================
   LOGIN NOTE
   ========================================================= */

.login-note {
    margin: 23px 0 0;

    text-align: center;

    font-size: 13px;
    line-height: 1.55;

    color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   ERROR MESSAGE
   ========================================================= */

.login-card .alert.error {
    margin-bottom: 20px;

    padding: 12px 15px;

    background: rgba(220, 38, 38, 0.18);

    border: 1px solid rgba(255, 130, 130, 0.40);

    border-radius: 11px;

    color: #ffffff;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* =========================================================
   SMALL LIGHT REFLECTION ON GLASS
   ========================================================= */

.login-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 25px;
    right: 25px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.65),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .login-body {
        padding: 15px;
    }

    .login-card {
        max-width: 100%;

        padding: 28px 22px;

        border-radius: 20px;
    }

    .login-brand {
        gap: 13px;

        margin-bottom: 27px;
    }

    .login-brand-logo {
        width: 72px;
    }

    .login-brand h1 {
        font-size: 21px;
    }

    .login-brand p {
        font-size: 12px;
    }

}