/* AC Fault Library · αρχική οθόνη */
/* Βασικό reset της προεπισκόπησης */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: one phone-proportioned column (1 : 1.95) scaled to fit the visible screen; every size is in container units measured from the 790px-wide mockup (1cqw = 7.9px there). Single dark theme by design. */
:root{
  --navy:#001a33; --navy-deep:#00122a; --navy-glow:#0a3c66;
  --ink:#ffffff; --ink-soft:rgba(255,255,255,.86);
  --cyan:#3fd6ff; --cyan-line:rgba(80,190,255,.55);
  --orange:#fc8600;
  --f-ui:"Ubuntu","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--navy-deep);color:var(--ink);font-family:var(--f-ui);overflow-x:hidden;
  display:flex;justify-content:center;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-block:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--navy-deep)}

/* ---- screen ---- */
.screen{position:relative;width:min(100%, calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) / 1.95));
  container-type:inline-size;display:flex;flex-direction:column;min-height:100%;
  background:
    radial-gradient(60% 22% at 50% 4%, rgba(18,90,150,.55), transparent 70%),
    radial-gradient(70% 30% at 100% 22%, rgba(20,110,200,.30), transparent 70%),
    linear-gradient(162deg, transparent 58%, rgba(40,140,255,.16) 63%, transparent 68%),
    linear-gradient(152deg, transparent 66%, rgba(60,160,255,.20) 70.5%, transparent 75%),
    radial-gradient(90% 26% at 0% 88%, rgba(25,110,210,.28), transparent 70%),
    linear-gradient(180deg, #032a4a 0%, #001b36 18%, #001730 55%, #002140 86%, #001a33 100%);
  overflow:hidden}
.screen::after{content:"";position:absolute;pointer-events:none;inset:0;
  background:
    linear-gradient(118deg, transparent 72%, rgba(70,170,255,.22) 76%, transparent 80%),
    linear-gradient(124deg, transparent 80%, rgba(50,150,255,.14) 83%, transparent 86%);
  mix-blend-mode:screen}

/* ---- header ---- */
.head{position:relative;height:41.8cqw;flex:none}
.brand{position:absolute;left:13.3cqw;top:.5cqw;width:74.2cqw;height:auto;pointer-events:none;user-select:none}
.iconbtn{position:absolute;top:6cqw;width:10cqw;height:10cqw;display:grid;place-items:center;border:0;background:none;color:var(--ink);padding:0;cursor:pointer;border-radius:2cqw}
.iconbtn svg{width:7.6cqw;height:7.6cqw}
.iconbtn.menu{left:4.4cqw}
.iconbtn.find{right:5cqw}

/* ---- tiles ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:3cqw 3cqw;padding:3.1cqw max(16px,3.2cqw) 0;flex:none}
.tile{position:relative;height:29.2cqw;border-radius:3.6cqw;border:.28cqw solid rgba(255,255,255,.28);
  color:var(--ink);font:700 5.6cqw/1.1 var(--f-ui);text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3cqw;padding:1.6cqw 1cqw 1.4cqw;
  text-shadow:0 .3cqw .6cqw rgba(0,0,0,.45);
  box-shadow:inset 0 .5cqw 1.2cqw rgba(255,255,255,.22), inset 0 -1.2cqw 2.4cqw rgba(0,0,0,.25), 0 0 2.6cqw var(--glow), 0 1cqw 2cqw rgba(0,0,0,.35);
  transition:transform .12s ease, filter .12s ease}
.tile svg{width:13cqw;height:13cqw;flex:none;filter:drop-shadow(0 .3cqw .5cqw rgba(0,0,0,.35))}
.tile:active{transform:scale(.97);filter:brightness(1.12)}
.tile:focus-visible,.iconbtn:focus-visible,.tab:focus-visible{outline:.5cqw solid var(--cyan);outline-offset:.6cqw}
.t-blue  {--glow:rgba(0,150,255,.55);  background:linear-gradient(150deg,#16adff 0%,#0074dc 45%,#00418e 100%)}
.t-orange{--glow:rgba(255,130,0,.50);  background:linear-gradient(150deg,#ffa726 0%,#f27400 48%,#9b3200 100%)}
.t-green {--glow:rgba(40,220,100,.45); background:linear-gradient(150deg,#3be56c 0%,#11a84a 45%,#005e30 100%)}
.t-teal  {--glow:rgba(0,210,240,.45);  background:linear-gradient(150deg,#14d6f0 0%,#0596b8 48%,#00546c 100%)}
.t-purple{--glow:rgba(150,100,255,.45);background:linear-gradient(150deg,#9e6bf8 0%,#6447d0 45%,#252c83 100%)}
.t-slate {--glow:rgba(120,170,220,.30);background:linear-gradient(150deg,#8ea8c6 0%,#4b7097 45%,#0b466a 100%)}

/* ---- info ---- */
.info{margin:4.1cqw max(16px,3.2cqw) 0;height:20.6cqw;flex:none;border-radius:2.8cqw;
  border:.25cqw solid var(--cyan-line);
  background:linear-gradient(180deg,rgba(10,70,125,.55),rgba(4,45,90,.55));
  box-shadow:inset 0 0 2cqw rgba(60,170,255,.18), 0 0 1.6cqw rgba(40,150,255,.25);
  display:flex;align-items:center}
.info .ic{width:21cqw;flex:none;display:grid;place-items:center}
.info .ic svg{width:10cqw;height:10cqw}
.info .sep{width:.25cqw;align-self:stretch;margin:4.4cqw 0;background:rgba(80,190,255,.6);flex:none}
.info .txt{padding-left:4cqw;padding-right:2cqw;min-width:0}
.info b{display:block;font:italic 700 4.3cqw/1.22 var(--f-ui);color:var(--ink)}
.info .off{display:flex;align-items:center;gap:1.4cqw;margin-top:1.2cqw;font:italic 500 3.6cqw/1.2 var(--f-ui);color:var(--cyan)}
.info .off svg{width:5.4cqw;height:5.4cqw;flex:none}

/* ---- sponsor ---- */
.sponsor{flex:none;display:flex;align-items:center;justify-content:center;gap:1.8cqw;margin-top:2.4cqw;height:8.9cqw}
.sponsor span{font:italic 500 2.9cqw/1 var(--f-ui);color:var(--ink-soft)}
.sponsor img{height:9.9cqw;width:auto}

/* ---- tab bar ---- */
.spacer{flex:1 1 0;min-height:2cqw}
.tabs{flex:none;position:relative;margin:0 .6cqw;border-radius:5.4cqw 5.4cqw 0 0;
  border:.25cqw solid rgba(110,170,230,.35);border-bottom:0;
  background:linear-gradient(180deg,rgba(14,52,92,.92),rgba(5,30,60,.96));
  box-shadow:0 -1cqw 3cqw rgba(0,0,0,.35), inset 0 .4cqw 1cqw rgba(120,180,255,.10);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:3.2cqw 1cqw calc(4.6cqw + env(safe-area-inset-bottom,0px))}
.tab{border:0;background:none;color:var(--ink);font:500 2.85cqw/1.15 var(--f-ui);display:flex;flex-direction:column;align-items:center;gap:1.3cqw;cursor:pointer;padding:0;white-space:nowrap}
.tab svg{width:6.8cqw;height:6.8cqw}
.tab[aria-current="page"]{color:var(--orange)}
.tab:active svg{transform:scale(.92)}

@media (prefers-reduced-motion:reduce){.tile{transition:none}}