:root {
    --green: #079b78;
    --green-dark: #066b5c;
    --green-bright: #10b96f;
    --cyan: #0c9fc2;
    --cyan-soft: #eaf9fd;
    --navy: #11314a;
    --text: #28455e;
    --muted: #6f8295;
    --line: #d8e6ee;
    --shadow: 0 22px 55px rgba(21, 74, 95, .18);
}
* { box-sizing: border-box; }
html, body, form { margin: 0; min-height: 100%; }
body { font-family: "Leelawadee UI", Tahoma, Arial, sans-serif; color: var(--navy); }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

/* LOGIN */
.login-page { min-height: 100vh; overflow-x: hidden; background: #effbfe; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 57%) minmax(520px, 43%); }
.login-hero { position: relative; min-height: 100vh; overflow: hidden; padding: clamp(34px, 4vw, 74px); background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 43%, rgba(232,249,253,.48) 100%),
    url('../Images/hospital-corridor.png') center/cover no-repeat;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(42,182,207,.09)); pointer-events: none; }
.brand-block { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; }
.brand-icon { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(150deg, #12c9ad, #068878); box-shadow: 0 10px 20px rgba(0,127,114,.18); }
.brand-icon svg { width: 42px; fill: #fff; }
.brand-block strong { display: block; font-size: clamp(22px, 2vw, 31px); letter-spacing: -.2px; }
.brand-block small { display: block; margin-top: 3px; font-size: clamp(15px, 1.2vw, 20px); font-weight: 700; color: #5f7184; }
.hero-copy { position: relative; z-index: 3; margin-top: clamp(80px, 11vh, 150px); max-width: 780px; }
.hero-copy h1 { margin: 0; color: #087d79; font-size: clamp(46px, 5.4vw, 80px); line-height: 1.03; letter-spacing: -2px; }
.hero-copy h2 { margin: 10px 0 30px; color: #5d7085; font-size: clamp(26px, 2.1vw, 34px); }
.hero-copy p { margin: 0; color: #51687c; font-size: clamp(18px, 1.45vw, 24px); line-height: 1.55; font-weight: 600; }
.hero-quote { margin-top: clamp(54px, 8vh, 100px); margin-left: 12px; color: #11869a; font-size: clamp(30px, 3vw, 48px); line-height: 1.25; font-family: "Segoe Print", "Leelawadee UI", cursive; transform: rotate(-2deg); }
.hero-quote span { margin-left: 42px; }
.hero-footer { position: absolute; z-index: 3; left: clamp(34px, 4vw, 74px); bottom: 55px; color: rgba(255,255,255,.92); font-size: 16px; line-height: 1.35; letter-spacing: .4px; }
.hero-footer span { display: inline-block; width: 78px; height: 2px; margin-left: 10px; background: rgba(255,255,255,.75); vertical-align: middle; }
.hero-cross { position: absolute; z-index: 1; color: rgba(38,180,207,.26); font-weight: 900; }
.cross-a { right: 16%; top: 13%; font-size: 88px; }
.cross-b { left: 55%; bottom: 17%; font-size: 68px; }
.hero-wave { position: absolute; left: -12%; right: -15%; height: 190px; border-radius: 50% 50% 0 0; transform: rotate(8deg); }
.wave-one { bottom: -88px; background: rgba(25,170,207,.28); }
.wave-two { bottom: -125px; background: rgba(10,133,158,.36); transform: rotate(2deg); }
.login-panel { display: grid; place-items: center; min-height: 100vh; padding: clamp(28px, 4vw, 70px); background: linear-gradient(135deg, rgba(218,248,251,.78), rgba(255,255,255,.94)); }
.login-card { width: min(100%, 650px); padding: clamp(34px, 3.5vw, 58px); border-radius: 30px; background: rgba(255,255,255,.97); box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.85); }
.hospital-emblem { width: 112px; height: 112px; margin: -6px auto 5px; color: #0eb874; }
.staff-label { display: block; text-align: center; color: var(--green); font-weight: 800; font-size: 20px; }
.login-card h1 { margin: 4px 0 2px; text-align: center; font-size: clamp(42px, 4vw, 61px); line-height: 1.05; letter-spacing: -1.5px; }
.login-help { margin: 0 0 28px; text-align: center; color: #6b7e91; font-size: 18px; }
.login-error { display: block; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; color: #9f2736; background: #fff2f4; border: 1px solid #ffd4da; font-weight: 700; }
.field-label { display: block; margin: 18px 0 8px; font-size: 18px; font-weight: 800; }
.input-wrap { position: relative; }
.input-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 27px; height: 27px; color: #7e8f9f; pointer-events: none; }
.input-icon svg, .password-toggle svg, .login-button svg, .print-button svg { width: 100%; height: 100%; fill: currentColor; }
.login-input { width: 100%; height: 68px; padding: 0 54px 0 58px; border: 2px solid #d6e2e9; border-radius: 15px; outline: none; color: var(--navy); background: #fff; font-size: 19px; transition: border-color .2s, box-shadow .2s; }
.login-input:focus { border-color: #22aeca; box-shadow: 0 0 0 4px rgba(34,174,202,.12); }
.password-toggle { position: absolute; right: 13px; top: 50%; width: 40px; height: 40px; transform: translateY(-50%); padding: 8px; border: 0; background: transparent; color: #7c8f9f; cursor: pointer; border-radius: 50%; }
.password-toggle:hover { background: #eff8fb; color: var(--cyan); }
.login-button { margin-top: 24px; width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 15px; background: linear-gradient(135deg, #0fb36f, #079857); color: #fff; font-size: 24px; font-weight: 800; box-shadow: 0 10px 22px rgba(9,153,87,.22); transition: transform .18s, box-shadow .18s, filter .18s; cursor: pointer; }
.login-button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(9,153,87,.28); filter: brightness(1.03); }
.login-button-icon { width: 30px; height: 30px; }
.divider { display: flex; align-items: center; gap: 18px; margin: 27px 0; color: #75889b; font-weight: 800; font-size: 18px; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: #cfdce3; }
.qr-nav-button { min-height: 80px; display: grid; grid-template-columns: 58px 1fr 34px; align-items: center; gap: 10px; padding: 0 22px; border: 2px solid #15a9ce; border-radius: 15px; background: linear-gradient(135deg,#fff,#f4fcff); color: #059ac2; font-size: 23px; font-weight: 800; transition: transform .18s, background .18s, box-shadow .18s; }
.qr-nav-button:hover { transform: translateY(-2px); background: #effbff; box-shadow: 0 10px 22px rgba(17,161,198,.12); }
.qr-icon { width: 42px; height: 42px; }
.qr-icon svg { width: 100%; height: 100%; fill: currentColor; }
.qr-arrow { text-align: right; font-size: 48px; font-weight: 300; line-height: 1; }

/* QR PAGE */
.qr-page { min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 52% 22%, #fff 0, #f6fdff 34%, #e6f8fc 100%); }
.qr-layout { position: relative; min-height: 100vh; padding: clamp(25px, 2.4vw, 48px); overflow: hidden; }
.qr-poster { position: relative; z-index: 3; width: min(44vw, 680px); min-width: 560px; min-height: calc(100vh - 96px); padding: 44px 34px 34px; background: linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.86)), url('../Images/hospital-corridor.png') center/cover; border: 1px solid rgba(153,210,225,.78); box-shadow: 0 20px 60px rgba(32,111,135,.16); overflow: hidden; }
.poster-header { position: relative; z-index: 2; text-align: center; }
.poster-header h1 { margin: 0; color: #0b6f63; font-size: clamp(38px, 3vw, 52px); line-height: 1.08; letter-spacing: -1px; }
.poster-header p { margin: 14px 0 12px; font-size: 20px; font-weight: 700; color: #175f60; }
.pulse-line { margin: 10px auto 17px; width: 58%; height: 16px; position: relative; }
.pulse-line::before, .pulse-line::after { content:""; position:absolute; top:7px; height:1px; background:#77bfc5; width:42%; }
.pulse-line::before { left:0; } .pulse-line::after { right:0; }
.pulse-line span { position:absolute; left:45%; top:2px; width:10%; height:12px; border-left:2px solid #4c9fa8; border-right:2px solid #4c9fa8; transform:skew(-25deg); }
.poster-instruction { font-size: 19px; line-height: 1.45; font-weight: 800; color: #1f2730; }
.poster-body { position: relative; min-height: 610px; margin-top: 6px; }
.nurse-wrap { position: absolute; left: -35px; bottom: -35px; width: 58%; height: 545px; overflow: hidden; }
.nurse-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; mix-blend-mode: multiply; }
.steps { position: absolute; left: -17px; bottom: 0; width: 53%; display: grid; gap: 10px; z-index: 4; }
.step { min-height: 74px; display: grid; grid-template-columns: 48px 54px 1fr; align-items: center; gap: 8px; padding: 9px 12px; background: rgba(255,255,255,.92); border: 1px solid #c3dce3; border-radius: 16px; box-shadow: 0 7px 16px rgba(31,82,91,.10); font-size: 15px; font-weight: 800; color: #154d53; }
.step b { width: 43px; height: 43px; border-radius: 50%; display:grid; place-items:center; background:#087d70; color:#fff; font-size:24px; }
.step-icon { width: 50px; height: 50px; border-radius: 12px; display:grid; place-items:center; color:#0e7374; background:#f7ffff; border:1px solid #d8eaed; font-size:29px; }
.qr-card { position: absolute; right: -3px; bottom: 0; width: 52%; min-height: 345px; padding: 18px 18px 16px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: rgba(255,255,255,.96); border: 1px solid #c7dce2; border-radius: 12px; box-shadow: 0 12px 24px rgba(22,73,91,.10); }
.qr-card img { width: 88%; max-width: 255px; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.qr-card > strong { margin-top: 8px; font-size: 17px; color: #111; }
.qr-url { margin-top: 3px; font-size: 11px; color: #444; word-break: break-all; text-align: center; }
.qr-placeholder { width: 92%; aspect-ratio: 1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; background: repeating-linear-gradient(45deg,#f4fafb,#f4fafb 12px,#eaf5f7 12px,#eaf5f7 24px); border: 2px dashed #6ab7c4; border-radius: 10px; color:#41666e; padding: 16px; }
.qr-placeholder strong { font-size: 18px; } .qr-placeholder span { font-size: 13px; } .qr-placeholder code { font-size: 12px; background:#fff; padding:5px 7px; border-radius:5px; }
.qr-actions { position: absolute; z-index: 5; left: 47vw; right: 3vw; top: 6.5vh; display: flex; align-items: flex-start; gap: 24px; justify-content: space-between; }
.print-button { min-width: min(35vw, 520px); height: 118px; display:flex; align-items:center; justify-content:center; gap:34px; border:0; border-radius:28px; background: linear-gradient(135deg,#10c7a7,#078d4f); color:#fff; font-size: clamp(44px, 4vw, 68px); font-weight:900; box-shadow: 0 12px 22px rgba(4,122,89,.28); cursor:pointer; transition:transform .18s, filter .18s; }
.print-button:hover { transform:translateY(-2px); filter:brightness(1.03); }
.print-button svg { width:74px; height:74px; }
.back-login { height: 88px; min-width: 255px; padding: 0 28px; display:flex; align-items:center; justify-content:center; gap:15px; border:2px solid #0b9f70; border-radius:26px; background:#fff; color:#0b705d; font-size:23px; font-weight:800; box-shadow:0 8px 18px rgba(42,114,118,.16); }
.back-login span:first-child { font-size:40px; }
.qr-decor { position:absolute; z-index:1; color:rgba(63,202,222,.17); font-weight:900; }
.cross-one { right:7%; top:24%; font-size:170px; } .cross-two { right:18%; top:45%; font-size:90px; }
.hexagons { position:absolute; z-index:1; right:-2%; top:38%; width:330px; height:340px; opacity:.25; }
.hexagons i { position:absolute; width:130px; height:112px; background:transparent; border:3px solid #fff; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.hexagons i:nth-child(1){left:90px;top:0}.hexagons i:nth-child(2){left:20px;top:100px}.hexagons i:nth-child(3){left:160px;top:100px}.hexagons i:nth-child(4){left:90px;top:200px}
.qr-wave { position:absolute; z-index:0; left:35%; right:-15%; height:330px; border-radius:50%; transform:rotate(8deg); }
.wave-a { bottom:-170px; background:rgba(38,199,202,.27); } .wave-b { bottom:-220px; background:rgba(12,146,184,.26); transform:rotate(-2deg); }

@media (max-width: 1450px) {
    .login-layout { grid-template-columns: minmax(0, 55%) minmax(470px,45%); }
    .login-card { padding: 32px 36px; }
    .hospital-emblem { width: 90px; height: 90px; }
    .login-input { height: 60px; }
    .login-button { min-height: 64px; }
    .qr-nav-button { min-height: 70px; }
    .qr-poster { min-width: 500px; padding: 28px 26px; }
    .poster-body { min-height: 520px; }
    .nurse-wrap { height: 470px; }
    .step { min-height: 64px; grid-template-columns: 40px 44px 1fr; font-size: 13px; }
    .step b { width:36px;height:36px;font-size:20px; }.step-icon{width:42px;height:42px;font-size:24px;}
    .qr-card { min-height: 300px; }
    .print-button { height: 94px; font-size: 50px; }
    .print-button svg { width: 60px; height: 60px; }
    .back-login { height: 74px; min-width: 225px; font-size: 20px; }
}
@media (max-width: 1100px) {
    .login-layout { grid-template-columns: 1fr; }
    .login-hero { min-height: 56vh; }
    .login-panel { min-height: auto; padding: 32px 20px 60px; }
    .hero-footer { display:none; }
    .login-card { margin-top:-90px; position:relative; z-index:6; }
    .qr-layout { padding: 24px; }
    .qr-poster { width: 100%; min-width: 0; min-height: auto; margin-top: 120px; }
    .qr-actions { left:24px; right:24px; top:20px; }
    .print-button { min-width: 0; width: 60%; height:80px; font-size:38px; border-radius:20px; }
    .print-button svg { width:48px;height:48px; }
    .back-login { height:70px; min-width:0; width:36%; }
}
@media (max-width: 700px) {
    .login-hero { padding: 28px 22px 120px; min-height: 640px; }
    .brand-icon { width:54px;height:54px; }.brand-icon svg{width:34px;}
    .hero-copy { margin-top:70px; }
    .hero-copy h1 { font-size:42px; }.hero-copy h2{font-size:24px}.hero-copy p{font-size:17px}.hero-quote{font-size:30px;}
    .desktop-only { display:none; }
    .login-card { padding:30px 22px; border-radius:22px; }
    .login-card h1 { font-size:42px; }.login-help{font-size:16px;}.field-label{font-size:16px;}.login-input{height:58px;font-size:17px;}.login-button{font-size:21px}.qr-nav-button{font-size:19px;grid-template-columns:44px 1fr 24px;padding:0 15px}.qr-icon{width:34px;height:34px}.qr-arrow{font-size:38px}
    .qr-poster { padding:24px 18px; }.poster-header h1{font-size:34px}.poster-header p{font-size:17px}.poster-instruction{font-size:16px}.poster-body{min-height:760px}.nurse-wrap{width:70%;height:420px;left:-20px;bottom:320px}.steps{left:0;bottom:0;width:100%}.qr-card{right:0;bottom:250px;width:58%;min-height:265px}.qr-actions{gap:10px}.print-button{width:56%;height:66px;font-size:28px;gap:14px}.print-button svg{width:38px;height:38px}.back-login{width:42%;height:66px;font-size:16px;padding:0 12px;border-radius:18px}.back-login span:first-child{font-size:30px}
}
@media print {
    @page { size: A4 portrait; margin: 8mm; }
    html, body, form, .qr-page { background:#fff !important; }
    .no-print, .qr-actions, .qr-decor, .qr-wave, .hexagons { display:none !important; }
    .qr-layout { padding:0; min-height:auto; overflow:visible; }
    .qr-poster { width:190mm; min-width:0; min-height:270mm; margin:0 auto; padding:12mm 9mm 9mm; box-shadow:none; border:1px solid #c9dde3; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .poster-header h1 { font-size:30pt; }
    .poster-header p { font-size:14pt; }
    .poster-instruction { font-size:13pt; }
    .poster-body { min-height:185mm; }
    .nurse-wrap { height:145mm; }
    .steps { width:54%; }
    .step { min-height:18mm; }
    .qr-card { width:50%; min-height:92mm; }
}


/* =========================================================
   MAIN LOGIN — REFERENCE Sep 5, 2026
   Only layout/UI overrides. Existing ASP.NET IDs and logic stay unchanged.
   ========================================================= */
.main-reference-page {
    background: #eefbfe;
}

.main-reference-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 57.2% 42.8%;
    background: #eefbfe;
}

.main-reference-hero {
    position: relative;
    min-height: 100vh;
    padding: 0 !important;
    overflow: hidden;
    background: #e9f9fc !important;
}

.main-reference-left-image {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: fill;
    user-select: none;
    -webkit-user-drag: none;
}

.main-reference-panel {
    min-height: 100vh;
    padding: clamp(35px, 4.5vw, 74px) clamp(34px, 3.8vw, 62px);
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 55% 15%, rgba(255,255,255,.98), rgba(237,251,254,.94) 62%, rgba(225,247,251,.96) 100%);
}

.main-reference-card {
    width: min(100%, 610px);
    margin: 0 auto;
    padding: clamp(30px, 3.1vw, 48px) clamp(34px, 3.25vw, 50px) clamp(34px, 3vw, 46px);
    border-radius: 31px;
    background: rgba(255,255,255,.985);
    border: 1px solid rgba(255,255,255,.95);
    box-shadow:
        0 22px 45px rgba(44, 99, 120, .14),
        0 4px 12px rgba(44, 99, 120, .06);
}

.main-reference-emblem {
    width: 116px;
    height: 116px;
    margin: -4px auto 3px;
}

.main-reference-card .staff-label {
    font-size: 19px;
    margin-top: 0;
}

.main-reference-card h1 {
    margin: 5px 0 3px;
    font-size: clamp(43px, 3.65vw, 58px);
    color: #102d47;
}

.main-reference-card .login-help {
    margin-bottom: 24px;
    color: #687d91;
    font-size: 17px;
}

.login-default-panel {
    width: 100%;
}

.main-reference-card .field-label {
    margin-top: 17px;
    margin-bottom: 8px;
    font-size: 17px;
    color: #102d47;
}

.main-reference-card .login-input {
    height: 67px;
    border-radius: 15px;
    border-color: #d4e1e8;
    font-size: 18px;
}

.main-reference-card .login-button {
    min-height: 71px;
    margin-top: 21px;
    border-radius: 14px;
    font-size: 24px;
}

.main-reference-card .divider {
    margin: 23px 0;
    font-size: 17px;
}

.main-reference-card .qr-nav-button {
    min-height: 80px;
    border-radius: 14px;
    font-size: 22px;
}

@media (max-width: 1600px) {
    .main-reference-card {
        width: min(100%, 565px);
        padding: 29px 38px 34px;
    }
    .main-reference-emblem {
        width: 94px;
        height: 94px;
    }
    .main-reference-card h1 {
        font-size: 45px;
    }
    .main-reference-card .login-help {
        margin-bottom: 16px;
        font-size: 16px;
    }
    .main-reference-card .field-label {
        margin-top: 13px;
        font-size: 16px;
    }
    .main-reference-card .login-input {
        height: 58px;
        font-size: 17px;
    }
    .main-reference-card .login-button {
        min-height: 60px;
        margin-top: 17px;
        font-size: 21px;
    }
    .main-reference-card .divider {
        margin: 17px 0;
        font-size: 16px;
    }
    .main-reference-card .qr-nav-button {
        min-height: 66px;
        font-size: 20px;
    }
    .main-reference-card .qr-icon {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 1100px) {
    .main-reference-layout {
        grid-template-columns: 1fr;
    }

    .main-reference-hero {
        min-height: auto;
        height: auto;
    }

    .main-reference-left-image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .main-reference-panel {
        min-height: auto;
        padding: 28px 20px 45px;
    }

    .main-reference-card {
        margin-top: 0;
        width: min(100%, 610px);
    }
}

@media (max-width: 600px) {
    .main-reference-panel {
        padding: 20px 12px 32px;
    }

    .main-reference-card {
        padding: 26px 20px 28px;
        border-radius: 22px;
    }

    .main-reference-card h1 {
        font-size: 39px;
    }

    .main-reference-card .qr-nav-button {
        grid-template-columns: 42px 1fr 24px;
        padding: 0 13px;
        font-size: 18px;
    }
}