:root{--g:#087F9B;--g2:#0B9DB2;--ink:#102B38;--muted:#60737B;--line:#DCECEF;--paper:#fff;--wash:#F7FCFD}*{box-sizing:border-box}body{margin:0;background:var(--wash);color:var(--ink);font-family:Inter,system-ui,Segoe UI,sans-serif}.shell{min-height:100vh;max-width:1600px;margin:auto;display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}.visual{padding:42px 8%;background:radial-gradient(circle at 80% 20%,#DDF5F8 0,transparent 30%),linear-gradient(145deg,#E8F7FA,#F7FCFD 58%,#DDF5F8);display:flex;flex-direction:column;position:relative;overflow:hidden;min-height:720px}.brand{display:flex;align-items:center;gap:10px;color:var(--green-dark)}.brand img{display:block;width:min(100%,300px);height:auto;max-height:104px;object-fit:contain;object-position:left center}.pitch{margin:auto 0;z-index:1;max-width:520px}.pitch small,.green{color:var(--g);font-size:10px;font-weight:800;letter-spacing:1.6px}.pitch h1{font-size:clamp(38px,4.5vw,64px);line-height:1.06;letter-spacing:-2.5px;color:#073B55}.pitch em{font-style:normal;color:var(--g2)}.pitch p{max-width:430px;color:#60737B;line-height:1.8}.art{position:absolute;right:8%;bottom:90px;width:60%;height:170px;border:1px solid #087F9B33;border-radius:50%;transform:rotate(-15deg)}.art:after{content:"";position:absolute;inset:25px 12%;border:1px solid #087F9B33;border-radius:50%}.box{position:absolute;left:42%;top:20px;width:100px;height:100px;border-radius:26px;background:linear-gradient(145deg,#0B9DB2,#073B55);box-shadow:0 18px 35px #087F9B35;color:#fff;display:grid;place-items:center;font-size:38px;transform:rotate(15deg);z-index:1}.box small{position:absolute;bottom:10px;font-size:10px;font-weight:800;letter-spacing:2px}.visual footer{font-size:12px;color:#60737B}.main{padding:32px 8%;display:flex;flex-direction:column;justify-content:space-between;min-height:720px}header{display:flex;justify-content:flex-end}.mobile{display:none}button{cursor:pointer}#theme{border:1px solid var(--line);border-radius:24px;padding:9px 14px;background:var(--paper);color:var(--ink)}article{width:min(100%,420px);margin:auto}.symbol{width:46px;height:46px;border-radius:15px;background:#E8F7FA;color:var(--g);display:grid;place-items:center;font-size:24px;margin-bottom:24px}h2{font-size:29px;letter-spacing:-1px;margin:10px 0}.muted{color:var(--muted);font-size:14px;margin:0 0 28px}form>label{display:block;font-size:12px;font-weight:700;margin:17px 0 8px}input[type=email],.password{width:100%;height:50px;border:1px solid var(--line);border-radius:11px;padding:0 14px;font:inherit;outline:0;background:#fff;color:#102B38}input:focus,.password:focus-within{border-color:#087F9B;box-shadow:0 0 0 3px #087F9B18}.password{display:flex;align-items:center;padding-right:10px}.password input{border:0;box-shadow:none!important;background:transparent!important;color:inherit!important;-webkit-text-fill-color:currentColor;caret-color:currentColor;flex:1;min-width:0;width:100%;height:100%;padding:0;font:inherit;appearance:none}.password button{border:0;background:none;color:#87958c}.options{display:flex;justify-content:space-between;align-items:center;margin:15px 0 21px;font-size:12px}.remember{display:flex;align-items:center;gap:6px;color:#66766c}.remember input{accent-color:var(--g)}a{color:var(--g);text-decoration:none;font-weight:650}.primary,.outline{width:100%;height:50px;border-radius:11px;font-weight:750;font-size:14px}.primary{border:0;color:#fff;background:linear-gradient(100deg,var(--g),var(--g2));box-shadow:0 8px 18px #087F9B26}.primary span{float:right;font-size:20px;margin-top:-4px}.notice{margin-top:13px;padding:10px 12px;background:#F7FCFD;border:1px solid #DCECEF;border-radius:9px;color:#718176;font-size:11px;line-height:1.5}.or{display:flex;align-items:center;gap:14px;color:#9aa79e;font-size:11px;margin:22px 0}.or:before,.or:after{content:"";height:1px;background:var(--line);flex:1}.outline{border:1px solid #BFE3E9;background:white;color:#073B55}.legal{text-align:center;color:#9aa69e;font-size:10px;line-height:1.6;margin-top:22px}.bottom{text-align:center;color:#91a096;font-size:11px;padding:8px}.dark{--ink:#E5EEEE;--muted:#A8BEC4;--line:#29434D;--paper:#10232B;--wash:#0C171B}.dark .visual{background:radial-gradient(circle at 82% 18%,#164454 0,transparent 30%),linear-gradient(145deg,#102F40,#0C171B 68%,#123B4A)}.dark .pitch h1{color:#E8F7FA}.dark .pitch p,.dark .visual footer{color:#A8BEC4}.dark input[type=email],.dark .password{background:#142C36;color:#E8F7FA}.dark .notice{background:#142C36;border-color:#29434D;color:#B9DCE0}.dark .outline{background:#10232B;color:#B9EAF0}@media (min-width: 1100px){
  .shell{grid-template-columns:minmax(0,1.05fr) minmax(480px,.95fr)}
  .visual{padding:48px clamp(48px,7vw,112px)}
  .main{padding:36px clamp(48px,7vw,112px)}
  article{width:min(100%,460px)}
}
@media (min-width: 761px) and (max-width: 1099px){
  .shell{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .visual{padding:34px 7%;min-height:680px}
  .main{padding:28px 6%;min-height:680px}
  .pitch h1{font-size:clamp(32px,4vw,48px)}
  .art{width:65%;right:4%;bottom:80px}
  article{width:min(100%,420px)}
}
@media (max-width: 760px){
  .shell{grid-template-columns:1fr;min-height:100vh}
  .visual{display:none}
  .main{min-height:100vh;padding:20px 6% 16px}
  .main header{justify-content:space-between;align-items:center}
  .mobile{display:flex;align-items:center;gap:8px;font-weight:750;color:var(--g)}
  .mobile img{display:block;width:min(62vw,220px);height:auto;max-height:68px;object-fit:contain;object-position:left center}
  article{width:min(100%,460px);padding:34px 0;margin:auto}
  h2{font-size:clamp(25px,6vw,30px)}
  .bottom{padding-bottom:10px}
}
@media (max-width: 380px){
  .main{padding-left:5%;padding-right:5%}
  .options{font-size:11px}
  .symbol{margin-bottom:18px}
  article{padding:24px 0}
}

/* v0.4.1: improve Hazuya Express logo contrast in dark mode */
.dark .brand img,
.dark .mobile img{
  filter:
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff)
    drop-shadow(1px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(1px 1px 0 #fff)
    drop-shadow(-1px 1px 0 #fff)
    drop-shadow(1px -1px 0 #fff)
    drop-shadow(-1px -1px 0 #fff)
    drop-shadow(0 0 2px rgba(255,255,255,.38));
}

/* v0.5: authentication form controls and feedback */
article input:not([type="checkbox"]){width:100%;height:50px;border:1px solid var(--line);border-radius:11px;padding:0 14px;font:inherit;outline:0;background:var(--paper);color:var(--ink);margin:0 0 2px}
article input:focus{border-color:var(--g);box-shadow:0 0 0 3px #087F9B18}
article form>label{display:block;font-size:12px;font-weight:700;margin:15px 0 8px}
article .notice[data-kind="error"]{border-color:#E7B7B7;background:#FFF6F6;color:#A43D3D}
article .primary:disabled{opacity:.65;cursor:wait}
.dark article input:not([type="checkbox"]){background:#142C36;color:#E8F7FA;border-color:#29434D}
.dark article .notice[data-kind="error"]{background:#351F23;border-color:#704047;color:#FFD6D6}
.session-card{line-height:1.9;margin:0 0 18px}

/* v0.6: role-based dashboard */
.dashboard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.dashboard-top h2{margin:8px 0 6px}.dashboard-top .muted{margin-bottom:0}
.avatar{flex:0 0 48px;width:48px;height:48px;border-radius:16px;background:linear-gradient(140deg,var(--g),var(--g2));color:white;display:grid;place-items:center;font-size:22px;font-weight:800}
.role-panel{padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:var(--wash);margin:18px 0 22px}
.role-caption{font-size:9px;font-weight:800;letter-spacing:1.4px;color:var(--muted)}
.role-list{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0}
.role-chip{font-size:11px;font-weight:750;color:var(--g);background:#E8F7FA;border:1px solid #CDEBF0;border-radius:30px;padding:5px 10px}
.role-panel>small{font-size:10px;color:var(--muted)}
.module-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 11px;font-size:13px}
.module-heading span{font-size:10px;color:var(--muted)}
.module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.module-card{min-width:0;min-height:116px;position:relative;display:flex;align-items:flex-start;gap:10px;text-align:left;padding:13px 11px;border:1px solid var(--line);border-radius:13px;background:var(--paper);color:var(--ink);font:inherit;transition:border-color .15s,transform .15s}
.module-card:active{transform:scale(.985)}.module-card:hover{border-color:var(--g)}
.module-icon{flex:0 0 31px;width:31px;height:31px;border-radius:10px;background:#E8F7FA;color:var(--g);display:grid;place-items:center;font-size:16px}
.module-copy{display:flex;flex-direction:column;gap:5px;min-width:0;padding-right:5px}
.module-copy strong{font-size:11px;line-height:1.35}.module-copy small{font-size:9px;line-height:1.45;color:var(--muted)}
.module-copy em{font-size:8px;font-style:normal;font-weight:750;color:var(--g);margin-top:auto}
.module-arrow{position:absolute;right:9px;bottom:8px;font-size:13px;color:var(--g)}
.dashboard-logout{margin-top:18px}
.dark .role-panel{background:#142C36}.dark .role-chip{background:#153C49;border-color:#285A68;color:#A9EAF1}
.dark .module-card{background:#10232B;color:var(--ink)}.dark .module-icon{background:#153C49;color:#A9EAF1}
@media(max-width:420px){.module-grid{grid-template-columns:1fr}.module-card{min-height:90px}.dashboard-top h2{font-size:25px}}