:root{
  --bg: #0b1b16;
  --card: rgba(255,255,255,0.88);
  --text: #0b1b16;
  --muted: rgba(11,27,22,0.65);
  --btn: rgba(255,255,255,0.95);
  --btn2: #0f7b5b;
  --shadow: 0 12px 30px rgba(0,0,0,0.20);
  --r: 18px;
  --tabh: 64px;
  --ctah: 64px;
  --pad: 14px;
  --font: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:var(--font); color:var(--text)}
/* NO SCROLL DI BASE: ogni pagina decide se far scrollare un main interno */
html,body{overflow:hidden; background:#0b1b16}

.page-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/static/aion_background.png") center/cover no-repeat;
  opacity: 1;
}


.shell, .home-shell{height:100%; display:flex; flex-direction:column}

.topbar{
  padding: calc(env(safe-area-inset-top) + 10px) var(--pad) 10px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
}
.topbar .title{font-size:20px; font-weight:800}
.topbar .actions{display:flex; gap:10px; align-items:center}
.back{color:rgba(255,255,255,0.95); text-decoration:none; font-size:22px; padding:6px 8px}

.main{
  flex:1;
  padding: 0 var(--pad) calc(var(--tabh) + 12px) var(--pad);
  overflow:auto;
}

.card{
  background:var(--card);
  border-radius:var(--r);
  padding:14px;
  box-shadow:var(--shadow);
  margin-bottom:12px;
}

.btn{
  border:0;
  border-radius:14px;
  padding:10px 12px;
  background:var(--btn);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.btn-primary{background:var(--btn2); color:white}

.input{
  width:100%;
  border:0;
  border-radius:14px;
  padding:12px 12px;
  background: rgba(255,255,255,0.95);
  font-size:16px;
  outline:none;
}

.lbl{display:block; font-weight:800; margin:10px 0 6px}
.hint{color:rgba(255,255,255,0.85); font-size:13px; margin:10px 2px}
.big{font-size:18px; font-weight:900}
.muted{color:var(--muted)}

.row{display:flex; gap:10px; align-items:center}
.row > *{flex:1}

.tabbar{
  position:fixed;
  left:0; right:0;
  bottom:0;
  height: calc(var(--tabh) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display:flex;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}
.tab{
  flex:1; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}
.tab-active{background: rgba(255,255,255,0.12)}
.tab-admin{color:#ffe7a6}
.hidden{display:none}

/* === FORCE AION BACKGROUND (global) === */
.page-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/static/aion_background.png") center/cover no-repeat;
  opacity: 1;
}

/* === FORCE AION BACKGROUND (VISIBLE) === */
html, body { background: transparent !important; }

.page-bg{
  position: fixed;
  inset: 0;
  z-index: 0;                 /* NON -1: altrimenti sta sotto il bg del body */
  background: url("/static/aion_background.png") center/cover no-repeat;
  opacity: 1;
  pointer-events: none;
}

/* tutto il contenuto dell'app sopra lo sfondo */
.shell, .home-shell{
  position: relative;
  z-index: 1;
}

/* =========================
   FORCE GLOBAL AION BACKGROUND
   ========================= */
.page-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/static/aion_background.png") center/cover no-repeat;
  opacity: 1;
}