/* ---------------------------------------------------------------------------------
   Global variables inspired by status.sofon.cz
---------------------------------------------------------------------------------- */
:root{
  --card-bg: rgba(255, 255, 255, 0.45);
  --card-border: rgba(255, 255, 255, 0.55);
  --text-main: #222;
  --text-muted: #555;
  --accent:#2d89ef;
  --radius:20px;
  --gap:24px;
  --max-width:1300px;
}

/* ---------------------------------------------------------------------------------
   Reset & Body
---------------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--text-main);
  background: url('assets/bg.jpg') center/cover fixed no-repeat;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

/* ---------------------------------------------------------------------------------
   Main container = transparent glass panel
---------------------------------------------------------------------------------- */
.app{
  width:100%;
  max-width:var(--max-width);
  background: rgba(255,255,255,0.45);
  border-radius: var(--radius);
  border:1px solid var(--card-border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding:30px 34px;
}

/* ---------------------------------------------------------------------------------
   Header (title & tagline)
---------------------------------------------------------------------------------- */
.top .brand{
  font-size:26px;
  font-weight:800;
  color:#111;
  text-shadow:0 1px 3px rgba(0,0,0,0.12);
}
.top .brand .accent{
  color: var(--accent);
}

.tagline{
  margin:6px 0 0;
  font-size:15px;
  color:var(--text-muted);
}

/* ---------------------------------------------------------------------------------
   Tools Grid
---------------------------------------------------------------------------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--gap);
  margin-top:24px;
}

/* ---------------------------------------------------------------------------------
   Tool card
---------------------------------------------------------------------------------- */
.tile{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius);
  padding:20px;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
}

/* Texts inside tile */
.tile h3{
  margin:0;
  font-size:17px;
  font-weight:600;
  color:#111;
}

.tile .muted{
  margin:0;
  font-size:14px;
  color: var(--text-muted);
}

.icon img{
  width:48px;
  height:48px;
  display:block;
}

/* ---------------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------------- */
.foot{
  margin-top:25px;
  text-align:center;
  color:var(--text-muted);
  font-size:14px;
}

/* ---------------------------------------------------------------------------------
   Modal
---------------------------------------------------------------------------------- */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:60;
}

.modal.hidden{ display:none; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}

.modal-panel{
  position:relative;
  z-index:70;
  width:92%;
  max-width:760px;
  border-radius: var(--radius);
  overflow:hidden;
}

.modal-content{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  padding:24px;
  border-radius: var(--radius);
  color:var(--text-main);
  min-height:160px;
}

.modal-close{
  position:absolute;
  right:14px;
  top:14px;
  background:transparent;
  border:none;
  color:#111;
  font-size:22px;
  cursor:pointer;
}

/* Utilities */
.small{font-size:13px;color:var(--text-muted);}
.center{display:flex;align-items:center;justify-content:center;}
input,select,button,textarea{font-family:inherit;}