:root{
  --bg:#0b0b0f;
  --fg:#fff;
  --muted:rgba(255,255,255,.7);
  --muted2:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.10);
  --max:1120px;
  --pad:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg)}

/* Header */
.header{
  position:sticky;top:0;z-index:10;
  background:rgba(11,11,15,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{
  max-width:var(--max);
  margin:0 auto;
  padding:14px var(--pad);
  display:flex;
  align-items:center;
  gap:12px;
}
.brand__logo{
  width:44px;height:44px;object-fit:contain;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
.brand__name{font-weight:700;font-size:18px}
.brand__tag{margin-top:6px;font-size:13px;color:var(--muted2)}

/* Main / Viewer (no card look) */
.main{width:100%;padding:0}
.viewer{
  position:relative;
  width:100%;
  min-height: calc(100vh - 74px - 260px);
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:hidden;
}
.viewer__canvas{
  width:100%;
  height:100%;
  display:block;
  background:transparent !important;
  touch-action:none;
  outline:none;
}

/* Hide hint completely */
.hint{display:none !important}

/* Loader */
.loader{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:transparent !important;
}
.loader__spinner{
  width:42px;height:42px;border-radius:999px;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.75);
  animation:spin 1s linear infinite;
}
.loader__text{font-size:14px;color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Footer */
.footer{border-top:1px solid var(--line);background:rgba(11,11,15,.85)}
.footer__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:20px var(--pad);
  display:grid;
  grid-template-columns:1.1fr 1.4fr .7fr;
  gap:18px;
}
.footer__title{font-weight:700;font-size:16px}
.footer__muted{margin-top:8px;color:var(--muted2);font-size:13px}
.footer__label{font-size:12px;color:var(--muted2);text-transform:uppercase;margin-bottom:10px}
.footer__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:14px}
.footer__list li span{color:var(--muted2);margin-right:6px}
.footer__list a{color:var(--fg);text-decoration:none;opacity:.9}
.footer__list a:hover{text-decoration:underline;opacity:1}

.footer__bottom{
  max-width:var(--max);
  margin:0 auto;
  padding:12px var(--pad) 18px;
  border-top:1px solid var(--line);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  color:var(--muted2);
  font-size:12px;
}
.footer__bottom a{color:var(--muted);text-decoration:none}
.footer__bottom a:hover{color:var(--fg);text-decoration:underline}
.footer__sep{opacity:.55}

/* Secret modal (Lobo style) */
.secretModal{position:fixed;inset:0;display:none;z-index:9999}
.secretModal.is-open{display:block}
.secretModal__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.secretModal__card{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(420px,92vw);
  padding:20px;
  border-radius:18px;
  background:rgba(11,11,15,.78);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 70px rgba(0,0,0,.55);
}
.secretModal__brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.secretModal__brand img{width:44px;height:44px;object-fit:contain}
.secretModal__title{font-weight:700;font-size:16px}
.secretModal__sub{margin-top:4px;font-size:12px;color:rgba(255,255,255,.55)}
.secretModal__input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:#fff;
  outline:none;
}
.secretModal__input:focus{border-color:rgba(255,255,255,.28)}
.secretModal__btn{
  width:100%;
  margin-top:10px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.secretModal__btn:hover{background:rgba(255,255,255,.10)}
.secretModal__msg{margin-top:10px;font-size:12px;color:rgba(255,255,255,.6);min-height:16px}

/* Responsive */
@media (max-width: 920px){
  .footer__inner{grid-template-columns:1fr}
  .footer__bottom{justify-content:flex-start}
  .viewer{min-height: calc(100vh - 74px - 360px);}
}
@media (max-width: 420px){
  .brand__logo{width:40px;height:40px}
  .brand__name{font-size:17px}
  .brand__tag{font-size:12px}
  .viewer{min-height: 380px;}
}