:root{
  --bg:#F7F8FA; --surface-1:#FFFFFF; --surface-2:#EFF2F6; --border:#E5E7EB;
  --text:#111216; --muted:#6B7280;
  --primary:#0066FF; --teal:#00C8B5; --accent:#FF4F4F; --danger:#E01E1E;
  --radius-card:16px; --radius-btn:12px;
  --shadow-1:0 1px 2px rgba(17,18,22,.06), 0 6px 16px rgba(17,18,22,.06);
  --shadow-2:0 2px 8px rgba(17,18,22,.08), 0 16px 32px rgba(17,18,22,.08);
}
/* Respect dark mode if theme sets [data-theme="dark"] */
[data-theme="dark"]{
  --bg:#111216; --surface-1:#16181F; --surface-2:#1B1E27; --border:rgba(255,255,255,.14);
  --text:#F7F8FA; --muted:#A3A7B0;
  --shadow-1:0 1px 1px rgba(0,0,0,.50), 0 8px 20px rgba(0,0,0,.35);
  --shadow-2:0 2px 10px rgba(0,0,0,.5), 0 20px 40px rgba(0,0,0,.4);
}

/* Component */
.ofdb-accordion{ display:grid; gap:12px; }
.ofdb-item{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ofdb-item:hover{ background:var(--surface-2); box-shadow:var(--shadow-2); }

.ofdb-header{ margin:0; }
.ofdb-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 18px;
  background:transparent; border:0; text-align:left; cursor:pointer;
  color:var(--text); font:600 16px/1.2 'Plus Jakarta Sans',system-ui,sans-serif;
  translate:0 0; transition: translate .06s ease, filter .2s ease, box-shadow .2s ease, background .2s ease;
}
.ofdb-trigger:hover{ filter:brightness(.98); }
.ofdb-trigger:active{ translate:0 1px; }
.ofdb-trigger:focus-visible{
  outline:0;
  box-shadow:0 0 0 2px var(--teal), 0 0 0 4px var(--bg);
  border-radius:12px;
}

.ofdb-title{ flex:1; min-width:0; text-wrap:balance; }

.ofdb-icon{ width:20px; height:20px; flex:0 0 auto; transition: transform .2s ease; transform: rotate(0deg); }
.ofdb-trigger[aria-expanded="true"] .ofdb-icon{ transform: rotate(180deg); }

.ofdb-panel{ overflow:hidden; height:0; transition: height .22s ease; will-change: height; }
.ofdb-panel[hidden]{ display:block; height:0 !important; padding:0; } /* keep flow for animation start */
@media (prefers-reduced-motion: reduce){
  .ofdb-panel{ transition:none !important; }
  .ofdb-trigger{ transition:none !important; }
}
.ofdb-panel-inner{ padding:0 18px 16px 18px; color:var(--text); }
.ofdb-panel-inner p{ margin:0 0 10px 0; }
.ofdb-muted{ color:var(--muted); }