/* Praktiskais darbs Nr.6 - vienkāršs stils (W3Schools tipa) */
:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#2563eb;
  --primary2:#475569;
}

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

body{
  margin:0;
  font-family: Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.header{
  background:var(--card);
  border-bottom:1px solid var(--border);
  padding:18px 16px;
}

.header h1{ margin:0 0 6px 0; font-size:22px; }
.subtitle{ margin:0; color:var(--muted); font-size:14px; }

.container{
  max-width:980px;
  margin:0 auto;
  padding:18px 16px 10px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  margin:0 0 14px 0;
}

.card h2{ margin:0 0 10px 0; font-size:18px; }

label{ display:block; margin:10px 0 6px; font-weight:bold; }

textarea, input[type="text"]{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font-size:14px;
  background:#fff;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.btn{
  appearance:none;
  border:1px solid var(--primary);
  background:var(--primary);
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-size:14px;
}

.btn:hover{ filter:brightness(0.95); }

.btn.btn-secondary{
  background:#fff;
  color:var(--primary2);
  border-color:var(--primary2);
}

.result{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fbfbfd;
}
.result:empty{ display:none; }

.hint{ color:var(--muted); font-size:13px; margin-top:10px; }

table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}
th, td{
  border:1px solid var(--border);
  padding:8px;
  text-align:center;
}
th{ background:#f1f5f9; }

.img-wrap{
  margin-top:10px;
  display:flex;
  justify-content:flex-start;
  align-items:center;
}

.footer{
  background:var(--card);
  border-top:1px solid var(--border);
  padding:10px 16px;
}

.footer-row{
  max-width:980px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:14px;
}

.validators{
  max-width:980px;
  margin:8px auto 0;
  padding-top:8px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-size:14px;
}

.validators a{
  color:var(--muted);
  text-decoration:none;
}
.validators a:hover{
  color:var(--primary);
  text-decoration:underline;
}
.validators .sep{ color:#c0c0c0; }

@media (max-width: 600px){
  .footer-row{ flex-direction:column; align-items:flex-start; }
}