/*@3.DUCC.1*/

.dcx-dlg {
  /*@3.DUCC.2*/
  margin: auto;
  inline-size: min(560px, calc(100vw - 1.5rem));
  max-block-size: min(88vh, 780px);
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  color: var(--text-primary);
  overflow: hidden;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55);
}
:root[data-theme="light"] .dcx-dlg { box-shadow: 0 20px 45px -18px rgba(15, 23, 42, .22); }
.dcx-dlg::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }

/*@3.DUCC.3*/
.dcx-dlg[open] { display: flex; flex-direction: column; }

/*@3.DUCC.4*/
:where(.dcx-dlg) :where(button) {
  font: inherit;
  font-family: 'Cairo', sans-serif;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[dir="ltr"] :where(.dcx-dlg) :where(button) { font-family: 'Inter', 'Cairo', sans-serif; }

.dcx-in { display: flex; flex-direction: column; inline-size: 100%; block-size: 100%; min-block-size: 0; }

/*@3.DUCC.5*/
.dcx-h {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1rem .75rem;
  border-block-end: 1px solid var(--border-color);
  flex: 0 0 auto;
}
/*@3.DUCC.6*/
.dcx-h-ico {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.1rem; block-size: 2.1rem; flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: .85rem;
}
.dcx-h-b { flex: 1 1 auto; min-inline-size: 0; }
.dcx-t { margin: 0; font-size: .95rem; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }
.dcx-s {
  display: block; margin-block-start: .1rem;
  font-size: .7rem; font-weight: 600; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dcx-x {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.1rem; block-size: 2.1rem; flex: 0 0 auto;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  color: var(--text-muted);
  transition: background-color var(--skin-dur-fast, .18s) var(--skin-ease, ease),
              color var(--skin-dur-fast, .18s) var(--skin-ease, ease),
              border-color var(--skin-dur-fast, .18s) var(--skin-ease, ease);
}
.dcx-x:hover { background: var(--bg-elevated); border-color: var(--border-color); color: var(--text-primary); }

/*@3.DUCC.7*/
.dcx-rail { display: block; block-size: 3px; inline-size: 100%; background: var(--bg-elevated); flex: 0 0 auto; }
.dcx-rail i {
  display: block; block-size: 100%;
  background: var(--st-accent, #a78bfa);
  transition: inline-size .6s var(--skin-ease-out, ease-out);
}

/*@3.DUCC.8*/
.dcx-b {
  padding: 1rem 1.4rem;
  overflow-y: auto;
  overflow-x: clip;
  flex: 1 1 auto;
  min-block-size: 0;
}

/*@3.DUCC.9*/
.dcx-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-end: .9rem; }
.dcx-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .22rem .6rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  font-size: .68rem; font-weight: 700; color: var(--text-secondary);
}
/*@3.DUCC.10*/
.dcx-chip[data-on="1"] {
  background: color-mix(in srgb, var(--st-accent, #a78bfa) 15%, transparent);
  border-color: var(--st-accent, #a78bfa);
  color: var(--st-accent, #a78bfa);
}
.dcx-chip .ltr { direction: ltr; unicode-bidi: isolate; font-family: 'JetBrains Mono', monospace; font-size: .66rem; }
/*@3.DUCC.11*/
.dcx-chip-d { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--dot, var(--text-muted)); display: inline-block; flex: 0 0 auto; }
.dcx-chip b { font-weight: 800; font-variant-numeric: tabular-nums; opacity: .75; }

/*@3.DUCC.12*/

/*@3.DUCC.13*/
.dcx-b .flashcard-scene {
  /*@3.DUCC.14*/
  --card-h: 292px;
  margin-block: .25rem 1.75rem;
  /*@3.DUCC.15*/
  --g-x: 4px; --g-y: 6px;
}
.dcx-b .flashcard-face { padding: 1.15rem 1.25rem 1rem; }
/*@3.DUCC.16*/

/*@3.DUCC.17*/
.dcx-ret {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .5rem;
  border-radius: var(--radius-pill);
  font-size: .64rem; font-weight: 700;
  background: var(--bg-elevated);
  color: var(--card-meta-ink, var(--text-muted));
}
.dcx-ret[hidden] { display: none; }
.dcx-ret .n { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.dcx-ret[data-tone="ok"]   { background: color-mix(in srgb, var(--st-ok, #10b981) 14%, transparent);     color: var(--st-ok, #10b981); }
.dcx-ret[data-tone="mid"]  { background: color-mix(in srgb, var(--st-warn, #f59e0b) 14%, transparent);   color: var(--st-warn, #f59e0b); }
.dcx-ret[data-tone="bad"]  { background: color-mix(in srgb, var(--st-danger, #ef4444) 14%, transparent); color: var(--st-danger, #ef4444); }

/*@3.DUCC.18*/
.dcx-b .sm2-grades { margin-top: 1rem; gap: .4rem; }
.dcx-b .sm2-btn { min-width: 0; flex: 1 1 6rem; padding: .55rem .6rem; font-size: .76rem; justify-content: center; }

/*@3.DUCC.19*/
.dcx-f {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .7rem 1rem;
  border-block-start: 1px solid var(--border-color);
  flex: 0 0 auto;
}
.dcx-f-sp { flex: 1 1 auto; }
.dcx-count {
  font-size: .7rem; font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.dcx-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: .74rem; font-weight: 700;
  text-decoration: none;
  transition: border-color var(--skin-dur-fast, .18s) var(--skin-ease, ease),
              color var(--skin-dur-fast, .18s) var(--skin-ease, ease),
              transform var(--skin-dur-fast, .18s) var(--skin-ease, ease);
}
.dcx-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); transform: translateY(-1px); }
.dcx-btn[hidden] { display: none; }
/*@3.DUCC.20*/
.dcx-btn--primary {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 15px rgba(124, 58, 237, .3);
}
.dcx-btn--primary:hover { color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(124, 58, 237, .35); }

/*@3.DUCC.21*/
.dcx-state {
  display: grid; gap: .55rem; justify-items: center;
  padding: 2.6rem 1rem;
  text-align: center; color: var(--text-muted);
}
.dcx-state[hidden] { display: none; }
.dcx-state > i { font-size: 1.8rem; opacity: .5; }
.dcx-state h4 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; }
.dcx-state p { margin: 0; font-size: .78rem; max-inline-size: 36ch; line-height: 1.75; text-wrap: pretty; }

.dcx-spin {
  inline-size: 1.5rem; block-size: 1.5rem;
  border: 2.5px solid var(--border-color);
  border-block-start-color: var(--st-accent, #a78bfa);
  border-radius: 50%;
  animation: dcx-spin .8s linear infinite;
}
@keyframes dcx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dcx-spin { animation: none; }
  .dcx-rail i { transition: none; }
}

/*@3.DUCC.22*/
.dcx-sum { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; margin-block-start: .15rem; }
.dcx-sum span {
  display: inline-flex; align-items: baseline; gap: .3rem;
  padding: .28rem .7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  font-size: .7rem; font-weight: 700; color: var(--text-secondary);
}
.dcx-sum b { font-size: .95rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/*@3.DUCC.23*/
.dcx-warn {
  margin-block-start: .9rem; padding: .6rem .75rem;
  border: 1px dashed color-mix(in srgb, var(--st-warn, #f59e0b) 45%, var(--border-color));
  border-radius: var(--radius-md);
  font-size: .7rem; color: var(--text-muted); line-height: 1.7;
}
.dcx-warn[hidden] { display: none; }
.dcx-warn .ltr { direction: ltr; unicode-bidi: isolate; font-family: 'JetBrains Mono', monospace; }

@media (max-width: 560px) {
  /*@3.DUCC.24*/
  .dcx-dlg {
    inline-size: calc(100vw - 1.4rem);
    max-inline-size: none;
    max-block-size: min(90dvh, 720px);
    block-size: auto;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
  }
  .dcx-b { padding: .8rem 1.15rem; }
  .dcx-b .flashcard-scene { --g-x: 3px; --g-y: 5px; }
  .dcx-h { padding: .7rem .8rem .6rem; }
  /*@3.DUCC.25*/
  .dcx-h .dcx-h-ico { display: none; }
  .dcx-f { padding: .6rem .8rem; }
  .dcx-x, .dcx-h-ico { min-block-size: 40px; }
  /*@3.DUCC.26*/
  .dcx-btn { min-block-size: 40px; flex: 0 1 auto; }
}