:root{
  --bg-primary:#05021a;
  --bg-secondary:#0c0835;
  --fg:#f8fbff;
  --muted:#adb7d9;
  --accent:#6de4ff;
  --accent-strong:#9c6dff;
  --surface:rgba(16,18,40,.75);
  --surface-highlight:rgba(157,109,255,.16);
  --border:rgba(109,228,255,.45);
  --shadow:0 20px 50px rgba(5,8,30,.45);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--fg);
  font:500 16px/1.6 "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:32px 24px 48px;
  background:
    radial-gradient(circle at 20% 20%, rgba(157,109,255,.14), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(109,228,255,.12), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(157,109,255,.18), transparent 60%),
    linear-gradient(160deg, var(--bg-primary), var(--bg-secondary));
  position:relative;
  overflow-x:hidden;
}

body.landing{
  background:
    url("../img/bg2.jpg") center/cover no-repeat fixed,
    radial-gradient(circle at 20% 20%, rgba(157,109,255,.14), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(109,228,255,.12), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(157,109,255,.18), transparent 60%),
    linear-gradient(160deg, var(--bg-primary), var(--bg-secondary));
}

body.app{
  background:
    url("../img/bg.jpg") center/cover no-repeat fixed,
    radial-gradient(circle at 20% 20%, rgba(157,109,255,.14), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(109,228,255,.12), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(157,109,255,.18), transparent 60%),
    linear-gradient(160deg, var(--bg-primary), var(--bg-secondary));
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.55), transparent 65%),
             radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,.35), transparent 60%),
             radial-gradient(1.5px 1.5px at 30% 70%, rgba(109,228,255,.4), transparent 70%),
             radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,.35), transparent 60%);
  background-repeat:repeat;
  mix-blend-mode:screen;
  opacity:.3;
}

body::after{
  transform:translateZ(0) scale(1.1);
  filter:blur(0.5px);
  opacity:.25;
}

main{
  width:min(700px,100%);
  background:var(--surface);
  border:1px solid var(--surface-highlight);
  border-radius:16px;
  padding:32px 28px;
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  position:relative;
}

main::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:12px;
  border:1px solid transparent;
  background:
    linear-gradient(140deg, rgba(255,255,255,.08), rgba(109,228,255,.12), rgba(157,109,255,.08))
    border-box;
  mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); /* keeps outline subtle */
  mask-composite:exclude;
  pointer-events:none;
}

.logo{
  display:block;
  max-width:220px;
  margin:0 auto 18px;
  filter:drop-shadow(0 12px 28px rgba(5,12,35,.6));
}

.landing-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  text-align:center;
  max-width:420px;
  padding:40px 36px;
  background:var(--surface);
  border-radius:20px;
  border:1px solid var(--surface-highlight);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}

.landing-logo{
  max-width:320px;
  margin-bottom:16px;
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 32px;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg);
  background:linear-gradient(135deg, rgba(109,228,255,.45), rgba(157,109,255,.65));
  border:1px solid var(--border);
  text-decoration:none;
  box-shadow:0 12px 30px rgba(5,12,35,.55);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  width:100%;
}

.cta:hover{transform:translateY(-2px); box-shadow:0 18px 36px rgba(5,12,35,.6);}
.cta.secondary{background:linear-gradient(135deg, rgba(109,228,255,.25), rgba(157,109,255,.35));}

#github{margin-top:-4px;}



main #logLink{
  display:inline-flex;
  position:absolute;
  top:24px;
  right:32px;
  padding:10px 18px;
  width:auto;
  background:linear-gradient(135deg, rgba(109,228,255,.25), rgba(157,109,255,.35));
  border:1px solid var(--border);
  border-radius:999px;
  backdrop-filter:blur(6px);
  box-shadow:0 8px 20px rgba(5,12,35,.45);
}

main #logLink:hover{box-shadow:0 12px 26px rgba(5,12,35,.6); transform:translateY(-1px);}

form{width:100%; margin-bottom:20px;}

fieldset{
  margin:0;
  padding:20px 18px 22px;
  border:1px solid var(--surface-highlight);
  border-radius:12px;
  background:linear-gradient(160deg, rgba(16,18,40,.85), rgba(31,36,68,.75));
}

legend{
  padding:0 4px;
  margin:0 0 12px;
  color:var(--muted);
  font-size:.95rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"]{
  width:100%;
  margin:10px 0;
  padding:12px 14px;
  background:rgba(12,14,30,.85);
  color:var(--fg);
  border:1px solid rgba(109,228,255,.25);
  border-radius:8px;
  outline:none;
  transition:border .2s ease, box-shadow .2s ease;
  box-shadow:inset 0 0 0 transparent;
}

input::placeholder{color:rgba(173,183,217,.65)}
input:focus{
  border:1px solid var(--accent);
  box-shadow:0 0 12px rgba(109,228,255,.35);
}

input[type="submit"],
button{
  padding:10px 18px;
  background:linear-gradient(135deg, rgba(109,228,255,.35), rgba(157,109,255,.6));
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:999px;
  cursor:pointer;
  width:auto;
  min-width:110px;
  font-weight:600;
  letter-spacing:.03em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 10px 24px rgba(5,12,35,.45);
}

input[type="submit"].primary,
button.primary{background:linear-gradient(135deg, rgba(109,228,255,.45), rgba(157,109,255,.65));}

input[type="submit"]:hover,
button:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(5,12,35,.55);}

button.edit{background:linear-gradient(135deg, rgba(109,228,255,.35), rgba(109,228,255,.55));}
button.delete{background:linear-gradient(135deg, rgba(255,109,151,.35), rgba(157,109,255,.55)); border-color:rgba(255,109,151,.45);}

#loginResult,
#registerResult,
.error,
#listResult,
#operationResult{
  display:inline-block;
  min-height:1.25rem;
  margin-top:8px;
  color:var(--accent);
  text-shadow:0 0 12px rgba(109,228,255,.4);
}

table{
  width:100%;
  border-collapse:collapse;
  margin-top:12px;
  background:rgba(10,12,28,.65);
  border:1px solid rgba(109,228,255,.15);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 24px rgba(5,8,25,.35);
}

thead th{
  color:var(--muted);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(18,22,48,.9);
}

th,td{
  padding:12px 10px;
  text-align:left;
  border-bottom:1px solid rgba(109,228,255,.08);
}

tbody tr:last-child td{border-bottom:0;}
tbody tr:hover{background:rgba(109,228,255,.08);}

.muted{color:var(--muted)}

a{
  color:var(--accent);
  text-decoration:none;
  transition:color .2s ease, text-shadow .2s ease;
}

a:hover{color:#b0f2ff; text-shadow:0 0 8px rgba(109,228,255,.45);}

#contactList button{margin:4px 6px 4px 0;}

#searchForm fieldset{display:flex; gap:12px; align-items:center;}
#searchInput{margin:0; flex:1;}

#operationResult{text-transform:uppercase; font-size:.82rem; letter-spacing:.12em;}

@media (max-width:680px){
  body{padding:48px 16px;}
  main #logLink{right:16px; top:16px;}
  main{padding:28px 20px;}
  
  table{font-size:.9rem;}
  button,input[type="submit"]{min-width:96px;}
}

@media (max-width:520px){
  thead{display:none;}
  table, tbody, tr, td{display:block; width:100%;}
  tr{margin-bottom:18px; border:1px solid rgba(109,228,255,.15); border-radius:12px; padding:12px 10px; background:rgba(10,12,28,.8);}
  td{border:0; padding:8px 4px; position:relative;}
  td::before{content:attr(data-label); display:block; font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px;}
  #contactList button{width:100%; margin:6px 0;}
}