.accordion-container{
  --teal:#00BCD4;
  --teal-dark:#00ACC1;
  --green:#8BC34A;
  --text-dark:#2c3e50;
  --text-gray:#333333;
  --border:#dee2e6;
  --bg-white:#ffffff;
  --bg-default:#f8f9fa;
  --bg-hover:#e9ecef;
  --shadow-sm:0 2px 4px rgba(0,0,0,0.08);
  --shadow-md:0 4px 12px rgba(0,0,0,0.12);

  max-width:100%;
  margin:20px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  box-sizing:border-box;
}

.accordion-container,
.accordion-container *{box-sizing:border-box}

.accordion-column{display:flex;flex-direction:column;gap:12px}

.accordion-item{
  background:var(--bg-white);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:var(--shadow-sm);
  margin:0;
}

.accordion-item:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.accordion-item.active{box-shadow:var(--shadow-md)}

.accordion-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  background:var(--bg-default);
  cursor:pointer;
  transition:background-color .2s ease;
  margin:0;
  border:none;
}

.accordion-header:hover{background:var(--bg-hover)}
.accordion-item.active .accordion-header{background:var(--bg-hover)}

.accordion-header h2{
  margin:0;
  padding:0;
  flex:1 1 auto;
  font:inherit;
  line-height:inherit;
}

.accordion-container .accordion-link,
.accordion-container .accordion-link:link,
.accordion-container .accordion-link:visited{
  color:var(--text-dark);
  text-decoration:none;
  font-weight:500;
  font-size:15px;
  display:block;
}

.accordion-container .accordion-link:hover{
  color:var(--teal);
  text-decoration:none;
}

.accordion-item.active .accordion-link{
  color:var(--teal-dark);
  font-weight:600;
}

.accordion-toggle{
  appearance:none;
  background:linear-gradient(135deg,var(--teal),var(--green));
  border:none;
  cursor:pointer;
  padding:0;
  color:#fff;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  width:30px;
  height:30px;
  margin:0;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  flex:0 0 auto;
}

.accordion-toggle:hover{transform:scale(1.05);box-shadow:0 3px 6px rgba(0,0,0,0.15)}
.accordion-item.active .accordion-toggle{
  background:linear-gradient(135deg,var(--teal-dark),var(--teal));
  box-shadow:0 3px 8px rgba(0,188,212,0.3);
}

.toggle-icon{
  width:10px;
  height:10px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
  transition:transform .2s ease;
}

.accordion-toggle[aria-expanded="true"] .toggle-icon{transform:rotate(-135deg)}

.accordion-content{
  height:0;
  overflow:hidden;
  background:var(--bg-white);
  transition:height .4s cubic-bezier(0.4,0,0.2,1);
  margin:0;
  padding:0;
  border-top:1px solid var(--border);
}

.accordion-content-inner{
  padding:0 18px;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .3s ease, transform .3s ease, padding .3s ease;
}

.accordion-content.active .accordion-content-inner{
  padding:18px;
  opacity:1;
  transform:translateY(0);
}

.accordion-content p,
.accordion-content-inner p{
  margin:0;
  padding:0;
  color:var(--text-gray);
  line-height:1.6;
  font-size:14px;
  text-align:left;
}

.accordion-toggle:focus-visible,
.accordion-link:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:6px;
}

@media (max-width:768px){
  .accordion-container{grid-template-columns:1fr;gap:14px}
  .accordion-header{padding:14px 16px}
  .accordion-container .accordion-link{font-size:14px}
  .accordion-toggle{width:28px;height:28px}
  .toggle-icon{width:9px;height:9px}
}

@media (max-width:480px){
  .accordion-header{padding:12px 14px}
  .accordion-container .accordion-link{font-size:13px}
  .accordion-content p,
  .accordion-content-inner p{font-size:13px}
  .accordion-toggle{width:26px;height:26px}
  .toggle-icon{width:8px;height:8px}
}

@media (prefers-reduced-motion:reduce){
  .accordion-item,
  .accordion-toggle,
  .toggle-icon,
  .accordion-content,
  .accordion-content-inner{transition:none !important}
}