/* Shared blue and gold identity, customer experience. */
:root{--brand-blue:#214778;--brand-deep:#153457;--brand-gold:#c6a45d;--brand-paper:#f3f6fb;--brand-ink:#203952;--brand-muted:#65768c}
body{min-height:100dvh;background:linear-gradient(180deg,#e4ebf5 0,#f3f6fb 450px);color:var(--brand-ink);font-family:'Segoe UI','Microsoft YaHei',sans-serif}
html:has(>body.lottery-page){background:#e8edf4}
body.lottery-page{
  --lottery-page-width:480px;
  width:100%;
  max-width:var(--lottery-page-width);
  margin-inline:auto;
  isolation:isolate;
  background:#e4ebf5;
  box-shadow:0 0 40px #15345718;
}
body.lottery-page::before{
  content:"";
  position:fixed;
  inset:0 max(0px,calc((100% - var(--lottery-page-width)) / 2));
  z-index:-1;
  pointer-events:none;
  background:url("images/milan-exchange-mobile-v2.png") center top / cover no-repeat;
}
body.lottery-page .overlay{
  inset-inline:max(0px,calc((100% - var(--lottery-page-width)) / 2));
}
.fifth-header{padding:20px max(24px,calc((100vw - 1120px)/2));background:var(--brand-deep);border-bottom:3px solid var(--brand-gold)}
.lottery-brand-title{color:#f6e3b6;font-size:22px;font-weight:700;letter-spacing:.12em}
.demo{width:min(760px,calc(100% - 32px));margin:32px auto 48px}
.demo>.heading{font:400 clamp(32px,5vw,46px)/1.15 Georgia,serif;color:var(--brand-deep);margin:34px 0 12px}
.demo>.sub{color:var(--brand-muted);line-height:1.7;margin-bottom:28px}
.fifth-login-brand{max-width:460px;margin:32px auto 0;padding:27px;background:var(--brand-deep);border-radius:18px 18px 0 0;border-bottom:2px solid var(--brand-gold)}
.fifth-login-logo{width:200px;height:44px}
.login{max-width:460px;gap:20px;padding:32px;background:#fff;border:1px solid #d5dfeb;border-top:0;border-radius:0 0 18px 18px;box-shadow:0 18px 45px #15345712}
.login-head h2{font-size:30px;line-height:1.2;color:var(--brand-deep)}
.login-head p{color:var(--brand-muted);font-size:14px}.login label{font-weight:600;color:var(--brand-ink)}
.login .phone-entry{background:#f7f9fc;border-color:#bdcadb;border-radius:8px}.login .phone-prefix{background:#eaf0f8;border-color:#bdcadb;color:var(--brand-blue)}
.login button{min-height:54px;background:#214778;border:1px solid #214778;color:#fff6df;border-radius:8px;box-shadow:0 3px 0 #c6a45d}
.login button:hover{background:#153457}
.account{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;padding:15px 20px;margin-bottom:20px;background:#fff;border:1px solid #d5dfeb;border-radius:10px;color:#53677f}
.account b{display:inline-grid;place-items:center;min-width:28px;min-height:28px;background:#214778;border-radius:6px;color:#fff6df}
.design.b{padding:32px 28px;background:linear-gradient(150deg,#fff,#ecf2fa);border:1px solid #c5d2e3;border-top:3px solid var(--brand-gold);border-radius:18px;box-shadow:0 12px 40px #15345710}
body.lottery-page #amalfiMount .design.b{
  padding:26px 8px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}
body.lottery-page .demo{width:calc(100% - 24px);margin:20px auto 30px}
body.lottery-page .demo>.heading{margin-top:24px;font-size:32px}
body.lottery-page .fifth-header{padding:12px 18px}
body.lottery-page .fifth-logo{height:29px}
body.lottery-page .account{font-size:12px;padding:12px;gap:5px}
body.lottery-page .design h2{font-size:30px}
.design h2{font-size:clamp(30px,5vw,42px)}.style-name{letter-spacing:0}.design.b::before{display:none}
.b .spin{border-radius:9px;min-height:56px}.note{color:var(--brand-muted);margin:22px auto;max-width:590px}
.fifth-history{max-width:none;margin-top:28px;padding:24px;background:#fff;border:1px solid #d5dfeb;border-radius:12px}
.fifth-history-head{padding-bottom:16px;border-bottom:1px solid #e2e8f0}.fifth-history-head h2{color:var(--brand-deep);font-size:27px}.fifth-history-row{padding:17px 0;border-color:#e2e8f0}.fifth-history-row:last-child{border-bottom:0}
.modal{background:#fff;border-radius:16px;border-top-color:var(--brand-gold)}
@media(max-width:650px){.demo{width:calc(100% - 24px);margin:20px auto 30px}.demo>.heading{margin-top:24px;font-size:32px}.fifth-header{padding:16px 20px}.login{padding:26px 22px}.fifth-login-brand{margin-top:24px;padding:22px}.design.b{padding:26px 8px}.account{font-size:12px;padding:12px;gap:5px}.fifth-history{padding:20px 16px}.fifth-history-head{align-items:center}.fifth-history-head h2{font-size:24px}}
.fifth-history-prize{display:flex;align-items:center;gap:12px;min-width:0}.fifth-history-prize img{flex-shrink:0;object-fit:contain}.fifth-history-prize strong{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

.lottery-page.milan-draw .fifth-header{
  justify-content:center;
  padding:20px 16px 8px;
  background:none;
  border:0;
}
.milan-draw .fifth-brand{
  padding:8px 28px;
  border:1px solid #c6a45d;
  border-radius:12px;
  background:#173a66;
  box-shadow:0 2px 8px #173a6626;
}
.milan-draw .lottery-brand-title{
  font-size:clamp(18px,5vw,24px);
  letter-spacing:.02em;
  line-height:1.3;
}
body.lottery-page.milan-draw .demo{
  margin:8px auto 32px;
}
body.lottery-page.milan-draw .account{
  margin-bottom:4px;
  padding:4px 8px;
  border:0;
  background:none;
  color:#203952;
  font-variant-numeric:tabular-nums;
}
.milan-draw .account b{
  background:none;
  color:#795515;
  font-size:18px;
}
.milan-draw .account a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  text-decoration:none;
}
.milan-draw .account a:hover{background:#f3f6fb}
body.lottery-page.milan-draw #amalfiMount .design.b{
  padding:0 4px;
}
.milan-draw .design :is(.style-name,h2,.intro,.caption){
  display:none;
}
.milan-draw .stage{
  margin:8px auto 0;
}
.milan-draw .hub{
  gap:3px;
  text-align:center;
}
.milan-draw .hub svg{
  display:block;
  margin:0;
}
.milan-draw .hub span{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}
.milan-draw .b .spin{
  margin:18px auto 0;
  width:min(82%,320px);
  background:linear-gradient(115deg,#fff0c9,#e9c674);
  color:#173a66;
  border:1px solid #b88d40;
  border-radius:28px;
  box-shadow:0 3px 0 #a47a34,0 7px 16px #18385a24;
  letter-spacing:0;
}
.history-actions{margin:16px 0 0;text-align:center}
.history-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 16px;border:1px solid #a2b6d0;border-radius:24px;
  background:#f3f6fbbb;color:#173a66;font-size:14px;font-weight:600;text-decoration:none;
}
.history-button:hover{background:#fff}
.history-button:focus-visible{outline:2px solid #214778;outline-offset:3px}
.history-button span{font-size:20px;line-height:1}
.milan-history .history-nav{text-align:left}
.milan-history .fifth-history{margin:16px 0 0;background:#f7fafff2}
.milan-history .fifth-history-head h1{margin:0;color:var(--brand-deep);font-size:clamp(18px,5vw,24px);line-height:1.4}
.milan-history .fifth-history-head span{flex-shrink:0}
.milan-history .fifth-history-scroll{max-height:none;overflow:visible}