:root{
  --bg:#000F7D;
  --accent:#0ea5c9;
  --btn-bg: rgba(255,255,255,0.06);
  --btn-hover: rgba(255,255,255,0.10);
  --glass: rgba(255,255,255,0.04);
}
html,body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
}
.shell{
  width:100%;
  height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  border-radius:0;
  padding:20px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.topbar{display:flex;align-items:center;justify-content:center;position:relative;padding:6px 46px}
.logo {display:flex;flex-direction:column;align-items:center;}
.logo .brand{font-weight:700;letter-spacing:0.6px}
.btn-gear{position:absolute;left:20px;top:20px; width: 25; height: 25px; cursor:pointer; border-radius: 6px; color: #fff;}
.hora-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:65px 10px}
h2.hora{font-size:80px;margin:0;font-weight:bold;line-height:0.9}
p.sub{font-size: 16px;margin:10px 0 0;color: #fff;}
.actions{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.action-btn{min-width:350px;max-width:420px;flex:1 1 360px;background:var(--btn-bg);border-radius:14px;padding:14px 18px;border: 2px solid #fff;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .18s,transform .12s}
.action-btn:hover{background:var(--btn-hover);transform:translateY(-4px)}
.action-btn .ico{width:60px;height:60px;display:grid; color: #fff; place-items:center;flex-shrink:0}
.action-btn .label{ color: #fff; display:flex;flex-direction:column;align-items:flex-start}
.action-btn strong{font-size:22px}
.action-btn small{font-size:14px; color:#fff; }

@media (max-width:450px) {
  h2.hora{font-size:55px} 
  .logo {display:flex;flex-direction:column;align-items:center;gap:6px}
  .logo img{ height:150px;object-fit:contain;}
  .hora-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px 10px}
  .action-btn{min-width:160px;background:var(--btn-bg);border-radius:14px;padding:14px 18px;border: 2px solid #fff;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .18s,transform .12s}
  .action-btn .label{ color: #fff; font-size:14px;}
  .action-btn strong{font-size:20px}
}


.footer {
  position: absolute;
  bottom: 20px;
  text-align: center;
  padding: 10px;
  color: #fff;
  font-size: 16px;
  opacity: 0.8;
}