:root{
  --text:#111111;
  --muted:#777777;
  --footer:#ffcc5f;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(255,165,0,.22) 0%, rgba(255,165,0,0) 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(255,165,0,.14) 0%, rgba(255,165,0,0) 55%),
    linear-gradient(180deg, rgba(255,165,0,.14) 0%, rgba(255,165,0,.06) 55%, rgba(255,255,255,0) 100%);
  overflow-x:hidden;
  overflow-y:hidden;
}

.stationShell{
  min-height:100vh;
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:14px 18px 12px;
}

.stationPanel{
  flex:1;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, rgba(255,252,246,.86) 0%, rgba(255,247,236,.72) 100%);
  border:1px solid rgba(255,255,255,.65);
  border-radius:34px;
  box-shadow:0 18px 60px rgba(0,0,0,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
  padding:14px 24px 12px;
  position:relative;
}

.stationPanel::before{
  content:"";
  position:absolute;
  left:-120px;
  top:-160px;
  width:420px;
  height:420px;
  background:radial-gradient(circle at 30% 30%, rgba(255,165,0,.20) 0%, rgba(255,165,0,0) 62%);
  pointer-events:none;
}

.homeScreen{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  z-index:1;
}

.homeTop{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.logoWrap{
  width:300px;
  max-width:42vw;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:0;
  margin-bottom:0;
}

.companyLogo{
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

.mainTitle{
  margin:6px 0 4px;
  text-align:center;
  font-size:48px;
  font-weight:900;
  line-height:1.02;
  letter-spacing:.3px;
}

.liveDateTime{
  font-size:18px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:30px;
}

.menuGrid{
  width:100%;
  max-width:800px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}

.menuCard{
  min-height:180px;
  text-decoration:none;
  color:#111;
  border-radius:30px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.66);
  background:
    linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.24) 100%),
    linear-gradient(135deg, rgba(255,196,92,.42) 0%, rgba(255,157,28,.30) 55%, rgba(255,184,68,.24) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.72),
    inset 0 -10px 22px rgba(255,255,255,.12),
    0 16px 30px rgba(0,0,0,.08),
    0 6px 16px rgba(255,145,0,.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    filter .2s ease;
}

.menuCard::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 42%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, rgba(255,214,140,.16) 0%, rgba(255,170,35,.05) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 0 32px rgba(255,180,40,.16);
  pointer-events:none;
}

.menuCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(255,170,60,.16);
  pointer-events:none;
}

.menuCard:hover{
  transform:translateY(-3px);
  filter:saturate(1.05);
  border-color:rgba(255,255,255,.84);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.80),
    inset 0 -10px 22px rgba(255,255,255,.14),
    0 20px 36px rgba(0,0,0,.10),
    0 8px 18px rgba(255,145,0,.18);
}

.menuCardInner{
  position:relative;
  z-index:1;
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:16px 14px;
}

.menuIconWrap{
  width:68px;
  height:68px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  border:1px solid rgba(255,255,255,.62);
  background:
    linear-gradient(180deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,.22) 100%),
    linear-gradient(135deg, rgba(255,205,120,.24) 0%, rgba(255,160,35,.14) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 0 20px rgba(255,180,40,.10),
    0 8px 18px rgba(0,0,0,.06);
}

.menuIcon{
  width:32px;
  height:32px;
}

.menuIconStroke{
  fill:none;
  stroke:#111;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.menuText{
  text-align:center;
  font-size:28px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:.2px;
  color:#1a1208;
}

.stationFooter{
  margin-top:12px;
  min-height:54px;
  background:var(--footer);
  border-radius:26px 26px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  color:#000;
  flex:0 0 auto;
}

@media (max-width:900px){
  body{
    overflow:auto;
  }

  .stationShell{
    height:auto;
    min-height:100vh;
  }

  .menuGrid{
    max-width:420px;
    grid-template-columns:1fr;
    gap:18px;
  }

  .mainTitle{
    font-size:36px;
  }

  .liveDateTime{
    font-size:16px;
    margin-bottom:18px;
  }
}

@media (max-width: 1200px){
  body{
    overflow-y:auto;
  }

  .stationShell{
    height:auto;
    min-height:100vh;
    padding:14px 18px 12px;
  }
}

@media (max-width:700px){
  .stationShell{
    padding:12px 12px 0;
  }

  .stationPanel{
    padding:18px 14px 12px;
    border-radius:24px;
  }

  .logoWrap{
    width:190px;
    max-width:64vw;
  }

  .mainTitle{
    font-size:30px;
  }

  .menuCard,
  .menuCardInner{
    min-height:155px;
  }

  .menuIconWrap{
    width:60px;
    height:60px;
    border-radius:18px;
    margin-bottom:8px;
  }

  .menuIcon{
    width:28px;
    height:28px;
  }

  .menuText{
    font-size:24px;
  }

  .stationFooter{
    min-height:48px;
    font-size:12px;
    border-radius:18px 18px 0 0;
  }
}

.menuCardDisabled{
  cursor:not-allowed;
  opacity:.72;
  filter:grayscale(.08);
}

.menuCardDisabled:hover{
  transform:none;
  filter:grayscale(.08);
  border-color:rgba(255,255,255,.66);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.72),
    inset 0 -10px 22px rgba(255,255,255,.12),
    0 16px 30px rgba(0,0,0,.08),
    0 6px 16px rgba(255,145,0,.14);
}

.menuCardDisabled .menuIconWrap{
  opacity:.88;
}

.menuCardDisabled .menuText{
  opacity:.88;
}

.menuSoon{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:#8a6b3d;
  letter-spacing:.2px;
  text-transform:uppercase;
}