:root{
  --accent1:#00796b;
  --accent2:#004d40;
  --bg1:#f4fbfb;
  --card:#ffffff;
  --muted:#6b7b82;
  --radius:14px;
  --glass: rgba(255,255,255,0.7);
  --focus: 0 6px 20px rgba(0,121,107,0.12);
}

/* base layout (keeps your previous structure) */
*{box-sizing:border-box}
body{
  margin:0;font-family:Inter,Segoe UI,system-ui,Arial,sans-serif;
  background:linear-gradient(135deg,var(--bg1),#ffffff 60%);
  color:#082033;min-height:100vh;display:flex;flex-direction:column;
}

/* header */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#fff;
}
header h2{margin:0;font-size:18px;letter-spacing:0.6px}
.language-wrap{display:flex;gap:12px;align-items:center}
.language-select{
  appearance:none;border:0;padding:8px 12px;border-radius:8px;background:#fff;color:var(--accent2);
  font-weight:600;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.04);
}

h2 a {color: #ffffff; text-decoration: none;}

/* flag badge (replaces previous lang-badge) */
.lang-flag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-weight:600;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
  min-height:34px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.03);
}
.lang-flag .flag-emoji{
  font-size:18px;
  line-height:1;
  transform:translateY(1px);
}
.lang-flag .lang-label{
  display:inline-block;
  color:#fff;
  opacity:0.95;
  text-transform: none;
}

/* small variant (used on very narrow screens) */
.lang-flag.compact{padding:6px 8px;font-size:12px}
.lang-flag.compact .lang-label{display:none}

/* Flag image inside badge */
.lang-flag { display:inline-flex; align-items:center; justify-content:center; padding:6px; border-radius:999px; background:rgba(255,255,255,0.06); }
.flag-img { width:22px; height:16px; object-fit:contain; display:block; border-radius:2px; }
@media(max-width:520px){ .flag-img { width:18px; height:14px } }


/* container */
.container{width:100%;max-width:720px;margin:28px auto;padding:0 20px;flex:1}
.single-column{display:flex;flex-direction:column;gap:18px}

/* card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.85), var(--card));
  border-radius:var(--radius); padding:20px; box-shadow: 0 10px 30px rgba(6,30,40,0.06);
  border:1px solid rgba(6,30,40,0.04);
}

/* form header */
.form-header{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.form-header h1{margin:0;color:var(--accent2);font-size:20px}
.form-sub{margin:0;color:var(--muted);font-size:13px}

/* Fancy form fields: floating labels */
.fancy-form{display:flex;flex-direction:column;gap:14px}
.field{position:relative}
.field input,
.field textarea{
  width:100%;padding:20px 14px 14px 14px;border-radius:10px;border:1px solid #e6eef0;background:var(--glass);
  font-size:15px;color:#082033;outline:none;transition:box-shadow .18s, border-color .18s, transform .18s;
  -webkit-appearance:none; padding-left: 19px;
}
.field textarea{min-height:120px;resize:vertical;padding-top:20px}

/* label floats above input when focused or has content */
.field label{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;
  background:transparent;padding:0 6px;color:var(--muted);font-weight:600;font-size:13px;
  transition:all .18s cubic-bezier(.2,.9,.2,1);
}
.field input:focus,
.field textarea:focus{
  box-shadow:var(--focus);border-color:var(--accent1);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  top:6px;transform:none;font-size:12px;color:var(--accent2);
  background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));border-radius:6px;
}

/* textarea specific smaller label offset */
.textarea-field label{left:14px}

/* submit button */
.form-actions{display:flex;align-items:center;gap:14px;justify-content:space-between;margin-top:6px}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:0;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;font-weight:700;cursor:pointer;
  box-shadow:0 10px 24px rgba(0,77,64,0.14);transition:transform .14s ease, box-shadow .14s ease;
}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:hover{box-shadow:0 18px 36px rgba(0,77,64,0.16)}
.btn-icon{opacity:0.95}
.btn-label{display:inline-block}

/*Footer*/
footer{margin-top:30px;padding:18px;background:var(--accent2);color:#fff;text-align:center;border-top-left-radius:0px;border-top-right-radius:0px}
.note{font-size:13px;color:#6b7b82}

/* small tip under button */
.small-tip{font-size:12px;color:var(--muted);flex:1;text-align:right}

/* description card styles */
.description h2{margin-top:0;color:var(--accent2)}
.help-list{margin:12px 0;padding-left:18px;color:var(--muted)}
.help-list ul{padding-left:18px;margin:8px 0}

/* small note text */
.note{font-size:13px;color:var(--muted);padding-top:4px}

/* responsive tweaks */
@media(max-width:520px){
  .form-actions{flex-direction:column;align-items:stretch}
  .small-tip{text-align:left}
  /* compact the flag badge to just emoji on small screens */
  .lang-flag{font-size:12px;padding:6px 8px;gap:6px}
  .lang-flag .flag-emoji{font-size:16px}
  .lang-flag .lang-label{display:none}
}

/* accessibility: focus-visible */
/* show visible rings only for keyboard nav */
input:focus-visible, textarea:focus-visible, .btn-primary:focus-visible{
  outline:3px solid rgba(0,121,107,0.12); outline-offset:3px; border-radius:10px;
}