:root { --primary:#108082; --primary-dark:#0d6668; --accent:#14b8a6; --yellow:#ffff00; --white:#fff; --text:#111827; --muted:#667085; --border:#d9e2e7; --shadow:0 25px 60px rgba(15,23,42,.14); }
* { box-sizing:border-box; margin:0; padding:0; }
body { min-height:100vh; min-height:100dvh; font-family:"Segoe UI",Arial,sans-serif; background:linear-gradient(135deg,#e9fbf8,#fff); color:var(--text); display:grid; place-items:center; padding:clamp(12px,2.5vw,28px); }
.login-wrapper { width:min(1180px,100%); min-height:650px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); overflow:hidden; background:#fff; border-radius:28px; box-shadow:var(--shadow); }
.login-left { position:relative; isolation:isolate; padding:clamp(36px,5vw,58px); display:flex; align-items:center; color:#fff; background:linear-gradient(135deg,#0d6668,#108082 58%,#14b8a6); }
.login-left::before,.login-left::after { content:""; position:absolute; inset:0; pointer-events:none; }
.login-left::before { background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.16),transparent 27%),radial-gradient(circle at 85% 80%,rgba(255,255,255,.13),transparent 30%); }
.login-left::after { background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:34px 34px; opacity:.25; }
.brand-box { position:relative; z-index:1; max-width:560px; }
.petro-logo { display:block; width:clamp(145px,16vw,210px); max-width:100%; padding:12px 18px; margin-bottom:25px; border-radius:999px; background:#fff; box-shadow:0 14px 35px rgba(0,0,0,.18); }
.eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:13px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.eyebrow i,.brand-box h1 span { color:var(--yellow); }
.brand-box h1 { font-size:clamp(36px,4vw,54px); line-height:1; font-weight:800; margin-bottom:13px; }
.brand-box h2 { font-size:clamp(20px,2.2vw,30px); line-height:1.3; font-weight:700; margin-bottom:17px; }
.intro-copy { max-width:520px; margin-bottom:28px; font-size:clamp(14px,1.25vw,17px); line-height:1.7; }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:520px; }
.feature-card { min-height:112px; padding:16px; display:flex; flex-direction:column; gap:12px; border:1px solid rgba(255,255,255,.25); border-radius:16px; background:rgba(255,255,255,.10); backdrop-filter:blur(8px); }
.feature-card>i { font-size:23px; }.feature-card strong,.feature-card small { display:block; }.feature-card strong { margin-bottom:6px; font-size:15px; }.feature-card small { font-size:12px; line-height:1.4; opacity:.93; }
.login-right { display:grid; place-items:center; padding:clamp(36px,5vw,58px); background:#fff; }.login-card { width:min(430px,100%); }.login-header { margin-bottom:32px; }.login-header h2 { margin-bottom:10px; font-size:clamp(30px,3vw,40px); font-weight:800; }.login-header p { font-size:16px; color:var(--muted); }.form-group { margin-bottom:22px; }.form-group label { display:block; margin-bottom:9px; font-size:14px; font-weight:700; }.input-wrap { position:relative; }.input-wrap>i { position:absolute; top:50%; left:17px; transform:translateY(-50%); color:#7b8798; font-size:16px; }.input-wrap input { width:100%; height:56px; padding:0 50px; border:1px solid var(--border); border-radius:14px; font:inherit; font-size:15px; outline:0; transition:border-color .2s,box-shadow .2s; }.input-wrap input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(16,128,130,.14); }.password-toggle { position:absolute; top:50%; right:12px; width:36px; height:36px; transform:translateY(-50%); border:0; border-radius:8px; color:#7b8798; background:transparent; cursor:pointer; }.password-toggle:hover,.password-toggle:focus-visible { color:var(--primary); background:#effafa; outline:0; }.error-text { min-height:20px; margin-bottom:16px; color:#dc2626; font-size:13px; font-weight:700; }.btn { border:0; cursor:pointer; transition:.2s ease; }.primary { color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); }.primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 12px 24px rgba(16,128,130,.25); }.full { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:58px; border-radius:14px; font-size:16px; font-weight:800; }.btn:disabled { cursor:not-allowed; opacity:.7; }.login-footer { margin-top:32px; text-align:center; color:var(--muted); }.login-footer i { margin-bottom:12px; color:var(--primary); font-size:18px; }.login-footer p { font-size:13px; }
@media (max-width:1100px) { .login-wrapper { min-height:610px; grid-template-columns:minmax(0,1fr) 420px; }.feature-card { min-height:105px; padding:14px; } }
@media (max-width:820px) { body { place-items:start center; }.login-wrapper { max-width:600px; min-height:0; grid-template-columns:1fr; }.login-left { min-height:285px; padding:32px 28px; }.feature-grid { display:none; }.intro-copy { margin-bottom:0; }.login-right { padding:36px 28px 34px; } }
@media (max-width:576px) { body { padding:0; background:#fff; }.login-wrapper { width:100%; min-height:100dvh; border-radius:0; box-shadow:none; }.login-left { min-height:245px; padding:28px 20px; }.petro-logo { width:132px; margin-bottom:16px; }.eyebrow { margin-bottom:10px; font-size:11px; }.brand-box h1 { font-size:31px; }.brand-box h2 { margin-bottom:10px; font-size:18px; }.intro-copy { font-size:13.5px; line-height:1.55; }.login-right { display:block; padding:30px 20px; }.login-card { max-width:none; }.login-header { margin-bottom:26px; }.login-header h2 { font-size:28px; }.login-header p { font-size:14px; }.input-wrap input,.full { height:52px; }.input-wrap input { font-size:14px; } }
@media (max-width:380px) { .login-left { min-height:225px; padding:24px 16px; }.login-right { padding:26px 16px; }.brand-box h1 { font-size:27px; }.brand-box h2 { font-size:16px; }.login-header h2 { font-size:25px; } }
@media (max-height:700px) and (min-width:821px) { .login-wrapper { min-height:580px; }.petro-logo { width:150px; margin-bottom:18px; }.intro-copy { margin-bottom:18px; }.feature-card { min-height:93px; padding:12px; }.feature-card>i { font-size:19px; margin-bottom:0; } }