/* assets/css/style.css */
:root {
  --accent: #2b6cb0;
  --accent-dark: #1f4f85;
  --bg: #f7fafc;
  --card: #ffffff;
  --muted: #6b7280;
  --line: #e6edf6;
  --radius: 10px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
body{background:var(--bg);margin:0;padding:20px;color:#111}
.container{max-width:900px;margin:20px auto}
.header, header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
h1{margin:0;font-weight:600}
.lang-switch a{margin-left:8px;text-decoration:none;color:var(--muted)}
.lang-switch a.active{font-weight:600;color:var(--accent)}
.card{background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:0 10px 28px rgba(20,20,20,0.07);margin-bottom:12px;border:1px solid #ebf1f8}
.btn{
  display:inline-block;
  padding:8px 14px;
  border-radius:8px;
  text-decoration:none;
  background:#fff;
  border:1px solid #d5deea;
  color:#233040;
  transition:.15s ease;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  line-height:1.2;
}
button.btn{
  appearance:none;
  -webkit-appearance:none;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(29,46,71,.12)}
.btn.primary{background:var(--accent);color:#fff;border:0}
.btn.primary:hover{background:var(--accent-dark)}
.actions{display:flex;gap:8px;justify-content:flex-start;align-items:center}
.actions-left,.actions-right{display:flex;gap:8px;align-items:center}
.actions-right{margin-left:auto}
.skip-btn{display:none !important;background:#16a34a;color:#fff;border:0}
.skip-btn:hover{background:#15803d}
.skip-btn.active{background:#166534}
.skip-btn.active::before{
  content:"\2713";
  display:inline-block;
  margin-right:6px;
  font-weight:700;
}
.question .qtitle{display:block;font-weight:600;margin-bottom:8px}
.required{color:#c53030;margin-left:6px}
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], textarea, select{width:100%;padding:9px 10px;border-radius:8px;border:1px solid #d6e0ec;background:#fff;color:#1f2937}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, textarea:focus, select:focus{outline:none;border-color:#7ea8d8;box-shadow:0 0 0 3px rgba(43,108,176,.12)}
input[type="file"]{
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid #d6e0ec;
  background:#fff;
  color:#1f2937;
}
input[type="file"]:focus{
  outline:none;
  border-color:#7ea8d8;
  box-shadow:0 0 0 3px rgba(43,108,176,.12);
}
input[type="file"]::file-selector-button{
  border:1px solid #cdd9e7;
  background:#f4f8fd;
  color:#233040;
  padding:8px 12px;
  border-radius:7px;
  cursor:pointer;
  margin-right:10px;
  transition:.15s ease;
}
input[type="file"]::file-selector-button:hover{
  background:#e8f0fa;
}
textarea{min-height:100px}
.progress{margin-bottom:8px;color:var(--muted)}
.rating .star{font-size:14px;padding:6px 8px;display:inline-block}
.optional{font-size:12px;color:var(--muted);margin-top:8px}
.footer{margin-top:18px;color:var(--muted);font-size:14px}
.survey-list{list-style:none;padding:0;margin:0}

/* public pages */
.public-page{
  background:
    radial-gradient(circle at 12% 12%, rgba(43,108,176,.12), transparent 38%),
    radial-gradient(circle at 88% 0%, rgba(30,143,118,.10), transparent 34%),
    linear-gradient(180deg, #f5f8fc 0%, #edf3fa 100%);
}
.public-wrap{
  max-width:960px;
  min-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
  padding-bottom:120px;
}
.public-wrap main{
  flex:1 0 auto;
}
.public-header{
  background:linear-gradient(140deg,#ffffff 0%, #f4f9ff 100%);
  border:1px solid #dbe7f5;
  margin-bottom:14px;
}
.public-header h1{
  font-size:28px;
  color:#163251;
}
.public-hero h2{
  margin:0 0 6px 0;
  color:#17385c;
  font-size:24px;
}
.public-hero p{
  margin:0;
  color:#5f6f82;
}
.survey-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;
}
.survey-item{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:146px;
  background:linear-gradient(155deg,#ffffff 0%, #f7fbff 100%);
}
.survey-banner{
  width:100%;
  height:140px;
  object-fit:contain;
  background:#f8fbff;
  border-radius:8px;
  border:0;
  margin-bottom:10px;
}
.survey-page-banner{
  width:100%;
  max-height:220px;
  object-fit:contain;
  background:#f8fbff;
  border-radius:10px;
  border:0;
  margin:10px 0;
}
.survey-item h3{
  margin:0 0 8px 0;
  color:#1e3d61;
}
.survey-meta{
  color:#5f6f82;
  font-size:13px;
  margin-bottom:12px;
}
.public-empty{
  color:#4f5f73;
}
.public-progress{
  border:1px solid #dbe6f3;
}
.progress-text{
  color:#4a5d72;
  font-weight:500;
  margin-bottom:8px;
}
.progress-track{
  width:100%;
  height:9px;
  border-radius:999px;
  background:#e6edf6;
  overflow:hidden;
}
.progress-track span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#2b6cb0 0%, #1ea97c 100%);
}
.question-card{
  border-left:4px solid #2b6cb0;
}
.question-card .qtitle{
  color:#1d3553;
}
.success-card{
  text-align:center;
  max-width:620px;
  margin:36px auto;
}
.success-card h1{
  margin-bottom:8px;
  color:#18456f;
}
.public-footer{
  margin-top:16px;
  padding:14px 16px;
  border-top:1px solid #d6e4f3;
  border-left:0;
  border-right:0;
  border-bottom:0;
  background:#f1f7ff;
  text-align:center;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  width:100%;
  max-width:none;
  border-radius:0 !important;
  box-shadow:0 -6px 18px rgba(18,35,56,.14) !important;
}
.public-footer-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#31445a;
}
.public-footer-brand strong{
  color:#183d63;
}
.public-footer-logo{
  width:46px;
  height:46px;
  object-fit:contain;
  border-radius:50%;
  border:1px solid #d6e4f3;
  background:#fff;
  padding:4px;
}
.public-footer-logo-fallback{
  width:46px;
  height:46px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#1d4f83;
  background:#e7f0fb;
  border:1px solid #c8dbf2;
}

/* public motion */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes softIn {
  from { opacity: 0; transform: translateY(6px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.public-header,
.public-hero,
.public-empty,
.public-progress,
.success-card{
  animation: softIn .45s ease both;
}
.survey-grid .survey-item{
  opacity: 0;
  animation: fadeUp .45s ease forwards;
}
.survey-grid .survey-item:nth-child(1){ animation-delay: .04s; }
.survey-grid .survey-item:nth-child(2){ animation-delay: .08s; }
.survey-grid .survey-item:nth-child(3){ animation-delay: .12s; }
.survey-grid .survey-item:nth-child(4){ animation-delay: .16s; }
.survey-grid .survey-item:nth-child(5){ animation-delay: .20s; }
.survey-grid .survey-item:nth-child(6){ animation-delay: .24s; }
.question-card{
  opacity: 0;
  animation: fadeUp .4s ease forwards;
}
.question-card:nth-of-type(1){ animation-delay: .03s; }
.question-card:nth-of-type(2){ animation-delay: .06s; }
.question-card:nth-of-type(3){ animation-delay: .09s; }
.question-card:nth-of-type(4){ animation-delay: .12s; }

@media (prefers-reduced-motion: reduce){
  .public-header,
  .public-hero,
  .public-empty,
  .public-progress,
  .success-card,
  .survey-grid .survey-item,
  .question-card{
    animation: none !important;
    opacity: 1 !important;
  }
  .btn{transition:none}
}

/* responsive */
@media (max-width:600px){
  .actions{flex-direction:column;align-items:stretch}
  .actions-left,.actions-right{width:100%;justify-content:flex-start}
  .actions-right{margin-left:0;justify-content:flex-end}
}

/* admin dashboard */
.admin-dashboard{
  background: linear-gradient(180deg, #eef3f9 0%, #f8fbff 100%);
}
.admin-wrap{max-width:1100px}
.admin-login-wrap{max-width:900px}
.admin-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border:1px solid #e5ebf3;
}
.admin-nav-brand h1{font-size:20px; margin:0}
.admin-nav-brand small{color:var(--muted)}
.admin-nav-links{display:flex; gap:8px; flex-wrap:wrap}
.admin-nav-links .btn{background:#f9fbff; border-color:#dbe4f0}

.admin-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}
.kpi-card{
  border:1px solid #e8edf5;
  background: linear-gradient(145deg, #ffffff 0%, #f6f9ff 100%);
}
.kpi-label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
.kpi-value{font-size:28px; font-weight:600; margin-top:4px}

.admin-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.full-width{grid-column: 1 / -1}

.admin-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:10px;
  border:1px solid #dee2e6;
  border-radius:10px;
  background:#fff;
  table-layout:auto;
}
.admin-table th, .admin-table td{
  padding:12px 14px;
  border-bottom:1px solid #e9ecef;
  border-right:1px solid #e9ecef;
  text-align:left;
  font-size:14px;
  background:#fff;
  vertical-align:middle;
  line-height:1.45;
}
.admin-table th:last-child, .admin-table td:last-child{
  border-right:0;
}
.admin-table th{
  color:#495057;
  font-weight:600;
  background:#f8f9fa;
  position:sticky;
  top:0;
  z-index:1;
}
.admin-table tr:nth-child(even) td{
  background:#fcfcfd;
}
.admin-table tr:hover td{
  background:#f1f5f9;
}
.admin-table td .btn{
  margin:2px 6px 2px 0;
}
.admin-table td form{
  display:inline-block;
  margin:0;
}
.admin-table-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}
.admin-pagination{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.admin-page-text{
  color:#526579;
  font-size:14px;
}
.btn.disabled{
  opacity:.5;
  pointer-events:none;
}
.admin-question-tree{
  color:#1f2937;
  white-space:normal;
}
.admin-login-card{
  background:linear-gradient(150deg, #ffffff 0%, #f7fbff 100%);
  border:1px solid #dfe9f5;
  border-radius:14px;
  padding:20px;
}
.admin-login-shell{
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  border-radius:16px;
}
.admin-login-brand{
  padding:30px 26px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.16), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.2), transparent 36%),
    linear-gradient(140deg, #1c3f64 0%, #1d6ca8 100%);
  color:#f6fbff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.admin-login-badge{
  margin:0 0 10px 0;
  display:inline-flex;
  width:fit-content;
  padding:4px 10px;
  font-size:12px;
  border-radius:999px;
  letter-spacing:.2px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);
}
.admin-login-brand h1{
  margin:0 0 10px 0;
  font-size:30px;
  line-height:1.15;
  color:#fff;
}
.admin-login-brand p{
  margin:0;
  color:rgba(244,251,255,.92);
  max-width:36ch;
}
.admin-login-card h2{
  margin:0 0 6px 0;
  color:#163251;
}
.admin-login-subtitle{
  margin:0 0 14px 0;
  color:#5f6f82;
}
.admin-login-form{
  display:grid;
  gap:12px;
}
.admin-field{
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #d0deee;
  background:#fff;
  color:#1f2937;
}
.admin-field:focus{
  outline:none;
  border-color:#6e9fd8;
  box-shadow:0 0 0 3px rgba(43,108,176,.14);
}
.admin-captcha-wrap{
  display:grid;
  gap:10px;
}
.admin-captcha-img{
  display:block;
  max-width:100%;
  width:230px;
  height:auto;
  border:1px solid #d3deea;
  border-radius:8px;
  background:#fff;
}
.admin-login-alert{
  margin-top:0;
  background:#fff8f3;
  border:1px solid #ffe4d1;
  color:#8a3e14;
  border-radius:10px;
  padding:10px 12px;
}

@media (max-width:900px){
  .admin-kpis{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .admin-grid{grid-template-columns: 1fr;}
  .admin-login-shell{grid-template-columns:1fr}
  .admin-login-brand h1{font-size:24px}
  .admin-table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
  .admin-table th, .admin-table td{
    white-space:nowrap;
  }
  .admin-table .admin-question-tree{
    white-space:normal;
    min-width:260px;
  }
}
@media (max-width:640px){
  .admin-nav{flex-direction:column; align-items:flex-start}
  .admin-kpis{grid-template-columns: 1fr;}
  .kpi-value{font-size:24px}
  .public-footer-brand{
    align-items:center;
    flex-direction:column;
    text-align:center;
  }
  .public-wrap{
    padding-bottom:145px;
  }
}