.knowledge-studio {
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid #d9e6f3 !important;
  background: linear-gradient(135deg, #f9fcff, #f2faf8) !important;
}

.studio-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.3rem 1rem;
}

.studio-head h3 { margin: 0; }
.studio-head p { margin: .35rem 0 0; color: #647b90; font-size: .88rem; line-height: 1.6; }
.studio-head-actions { display: grid; gap: .55rem; justify-items: end; }
.studio-lab-link { color: #2977b5; font-size: .78rem; font-weight: 900; text-decoration: none; }
.studio-lab-link:hover { text-decoration: underline; }
.studio-metrics { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.studio-metric { padding: .42rem .65rem; border-radius: 9px; background: #fff; color: #3e617f; font-size: .76rem; font-weight: 900; box-shadow: 0 6px 16px rgba(49, 86, 120, .07); }

.studio-tabs { display: flex; gap: .3rem; overflow-x: auto; padding: 0 1.2rem; border-bottom: 1px solid #dce7f2; scrollbar-width: thin; }
.studio-tab { padding: .75rem .85rem; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #64798f; font-weight: 900; cursor: pointer; white-space: nowrap; }
.studio-tab:hover { color: #2f769f; background: rgba(80, 160, 207, .05); }
.studio-tab.active { border-color: #3e92d4; color: #236da8; }
.studio-tab-count { display: inline-grid; min-width: 20px; height: 20px; margin-left: .25rem; place-items: center; border-radius: 999px; background: #edf4fa; color: #56738c; font-size: .66rem; }
.studio-tab.active .studio-tab-count { background: #e0f3fb; color: #1f799e; }

.studio-body { min-height: 390px; padding: 1.2rem; }
.studio-panel { display: grid; gap: 1rem; }
.studio-panel[hidden] { display: none; }
.studio-panel-status { padding: .7rem .85rem; border-left: 4px solid #48a9cd; border-radius: 9px; background: #ecf7fc; color: #356983; font-size: .82rem; font-weight: 800; }

.review-session-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem 1rem; align-items: center; }
.review-session-bar__copy { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; color: #526d82; font-size: .78rem; font-weight: 850; }
.review-session-bar__copy strong { color: #235c7d; font-size: .92rem; }
.review-progress { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 999px; background: #deebf3; }
.review-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #548fe5, #2fc4c7); transition: width .28s ease; }

.flashcard {
  position: relative;
  min-height: 330px;
  padding: 1.5rem;
  border: 1px solid #dce7f2;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff 0%, #fbfdff 62%, #f0faf7 100%);
  box-shadow: 0 14px 32px rgba(48, 85, 120, .09);
}
.flashcard-front, .flashcard-back { display: grid; min-height: 280px; align-content: center; justify-items: center; gap: 1rem; text-align: center; }
.flashcard-category { position: absolute; left: 1rem; top: 1rem; padding: .28rem .58rem; border-radius: 999px; background: #edf6ff; color: #2e73ad; font-size: .72rem; font-weight: 900; }
.flashcard-schedule { position: absolute; right: 1rem; top: 1rem; color: #70879a; font-size: .72rem; font-weight: 800; }
.flashcard h4 { max-width: 780px; margin: 1.2rem 0 .2rem; color: #17283b; font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.55; }
.flashcard-guidance { max-width: 680px; margin: 0; color: #698095; font-size: .86rem; line-height: 1.65; }
.flashcard-recall { width: min(680px, 100%); min-height: 86px; resize: vertical; padding: .8rem .9rem; border: 1px solid #d8e5ef; border-radius: 12px; background: rgba(255, 255, 255, .86); color: #304d64; font: inherit; line-height: 1.6; }
.flashcard-recall:focus { outline: 3px solid rgba(61, 158, 205, .14); border-color: #69b6dc; }
.flashcard-answer-title { color: #236b65; font-size: .76rem; font-weight: 950; letter-spacing: .08em; }
.flashcard-answer-main { max-width: 820px; color: #24495a; font-size: 1.04rem; font-weight: 800; line-height: 1.75; }
.flashcard-answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(880px, 100%); gap: .7rem; text-align: left; }
.flashcard-answer-grid div { padding: .75rem; border: 1px solid #dce9ee; border-radius: 12px; background: rgba(255, 255, 255, .82); }
.flashcard-answer-grid strong { display: block; margin-bottom: .25rem; color: #2b7180; font-size: .76rem; }
.flashcard-answer-grid span { color: #526b78; font-size: .8rem; line-height: 1.6; }
.flashcard-own-answer { width: min(880px, 100%); padding: .65rem .8rem; border-radius: 10px; background: #f1f6fb; color: #5b7184; font-size: .78rem; text-align: left; }

.studio-actions { display: flex; justify-content: center; gap: .55rem; flex-wrap: wrap; }
.studio-actions button, .studio-actions a { min-height: 40px; padding: .58rem .9rem; border: 1px solid #d9e4ee; border-radius: 10px; background: #fff; color: #3e5d78; font-weight: 850; cursor: pointer; text-decoration: none; }
.studio-actions .primary { border: 0; color: #fff; background: linear-gradient(135deg, #568be7, #31c7ce); box-shadow: 0 8px 20px rgba(64, 144, 208, .18); }
.studio-actions .danger { border-color: #fecaca; background: #fff5f5; color: #b33e49; }
.studio-actions .warning { border-color: #f2cf94; background: #fff9ec; color: #93611c; }
.studio-actions .success { border-color: #8bd9bd; background: #effbf6; color: #157556; }
.studio-actions button:hover, .studio-actions a:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(43, 83, 116, .1); }
.memory-choice { display: grid; min-width: 142px; gap: .08rem; text-align: left; }
.memory-choice small { opacity: .72; font-size: .67rem; }
.review-shortcuts { color: #8395a5; font-size: .7rem; text-align: center; }

.review-complete { display: grid; justify-items: center; gap: 1rem; padding: 1.5rem; border: 1px solid #d9e8ee; border-radius: 18px; background: linear-gradient(135deg, #f2f9ff, #eefaf5); text-align: center; }
.review-complete-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 20px; background: linear-gradient(135deg, #5790e7, #2fc6c4); color: #fff; font-size: 1.7rem; font-weight: 950; box-shadow: 0 12px 28px rgba(55, 145, 192, .2); }
.review-complete h4 { margin: 0; font-size: 1.35rem; }
.review-complete p { max-width: 660px; margin: 0; color: #5f778b; line-height: 1.7; }
.review-result-grid { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); width: min(620px, 100%); gap: .6rem; }
.review-result-grid span { display: grid; gap: .15rem; padding: .7rem; border: 1px solid #dae7ef; border-radius: 11px; background: #fff; color: #6e8396; font-size: .72rem; }
.review-result-grid strong { color: #295e7e; font-size: 1.08rem; }

.quiz-question { padding: 1.1rem; border: 1px solid #dce7f2; border-radius: 14px; background: #fff; }
.quiz-question h4 { margin: .5rem 0 1rem; font-size: 1.15rem; }
.quiz-progress { display: flex; justify-content: space-between; color: #65798d; font-size: .78rem; font-weight: 850; }
.quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.quiz-option { padding: .8rem; border: 1px solid #dce5ee; border-radius: 10px; background: #fbfdff; color: #34516c; text-align: left; font-weight: 800; cursor: pointer; }
.quiz-option:hover { border-color: #79b4e5; background: #f0f8ff; }
.quiz-option.correct { border-color: #64c59f; background: #edf9f4; color: #116d50; }
.quiz-option.wrong { border-color: #ef9a9a; background: #fff2f2; color: #a93440; }
.quiz-explanation { margin-top: .8rem; padding: .8rem; border-radius: 10px; background: #f2f7fc; color: #4f6479; line-height: 1.7; }

.compare-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: .7rem; align-items: end; }
.compare-controls label { display: grid; gap: .35rem; color: #5b7186; font-size: .78rem; font-weight: 850; }
.compare-controls select, .queue-builder select, .queue-builder input { min-height: 43px; padding: .7rem; border: 1px solid #dce5ee; border-radius: 10px; background: #fff; font: inherit; }
.compare-versus { padding-bottom: .65rem; color: #3f83bd; font-weight: 950; }
.compare-table { display: grid; grid-template-columns: 120px 1fr 1fr; overflow: hidden; border: 1px solid #dce6ef; border-radius: 12px; }
.compare-cell { padding: .75rem; border-right: 1px solid #e3eaf2; border-bottom: 1px solid #e3eaf2; background: #fff; line-height: 1.6; }
.compare-cell.label { background: #f3f7fb; color: #4e657b; font-weight: 900; }
.compare-cell:nth-last-child(-n + 3) { border-bottom: 0; }

.queue-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.queue-overview article { padding: .8rem; border: 1px solid #dce8f0; border-radius: 12px; background: rgba(255, 255, 255, .86); }
.queue-overview span { display: block; color: #718698; font-size: .72rem; font-weight: 800; }
.queue-overview strong { display: block; margin-top: .2rem; color: #285e7d; font-size: 1.18rem; }
.queue-builder-card { padding: .9rem; border: 1px solid #d9e7ef; border-radius: 14px; background: linear-gradient(135deg, #f1f8ff, #f2faf7); }
.queue-builder-card h4 { margin: 0 0 .65rem; }
.queue-builder { display: grid; grid-template-columns: minmax(220px, 1fr) 150px 170px auto; gap: .65rem; }
.queue-builder label { display: grid; gap: .3rem; color: #5c7488; font-size: .72rem; font-weight: 850; }
.queue-builder button { align-self: end; min-height: 43px; padding: .55rem .85rem; border: 0; border-radius: 10px; background: linear-gradient(135deg, #568be7, #31c7ce); color: #fff; font-weight: 900; cursor: pointer; }
.queue-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.queue-filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.queue-filter { padding: .42rem .7rem; border: 1px solid #dce6ef; border-radius: 999px; background: #fff; color: #5a7185; font-weight: 850; cursor: pointer; }
.queue-filter.active { border-color: #76bbdf; background: #eaf7fc; color: #23749a; }
.queue-toolbar > span { color: #718596; font-size: .75rem; }
.queue-list-dynamic { display: grid; gap: .75rem; }
.queue-topic { overflow: hidden; border: 1px solid #dce7ef; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(47, 84, 115, .06); }
.queue-topic.completed { background: linear-gradient(135deg, #fff, #f1faf6); }
.queue-topic.overdue { border-color: #efc991; }
.queue-topic__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .9rem; }
.queue-index { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #edf6ff; color: #2e73ad; font-weight: 950; }
.queue-topic__title { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.queue-topic__title strong { color: #233e55; }
.queue-topic__copy small { display: block; margin-top: .28rem; color: #75899a; line-height: 1.5; }
.queue-tag { padding: .2rem .45rem; border-radius: 999px; background: #edf5fb; color: #55758d; font-size: .66rem; font-weight: 900; }
.queue-tag.high { background: #fff1ee; color: #b85143; }
.queue-tag.medium { background: #fff7e8; color: #9a691d; }
.queue-tag.low { background: #eff8f5; color: #2d7c68; }
.queue-topic__score { text-align: right; }
.queue-topic__score strong { display: block; color: #276a85; font-size: 1.08rem; }
.queue-topic__score span { color: #7d8f9f; font-size: .7rem; }
.queue-progress { height: 7px; margin: 0 .9rem .8rem; overflow: hidden; border-radius: 999px; background: #e3edf3; }
.queue-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5a91e5, #2dc2ad); }
.queue-evidence { border-top: 1px solid #e4ebf1; }
.queue-evidence summary { padding: .72rem .9rem; color: #3c647f; font-size: .8rem; font-weight: 900; cursor: pointer; }
.queue-evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; padding: 0 .9rem .9rem; }
.evidence-step { display: grid; align-content: start; gap: .4rem; min-height: 130px; padding: .75rem; border: 1px solid #dce7ef; border-radius: 11px; background: #f8fbfd; }
.evidence-step.done { border-color: #a8dac8; background: #f0faf6; }
.evidence-step__label { display: flex; align-items: center; justify-content: space-between; gap: .4rem; color: #345970; font-size: .78rem; font-weight: 900; }
.evidence-step__label i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #e7eef4; color: #718596; font-style: normal; }
.evidence-step.done .evidence-step__label i { background: #34aa83; color: #fff; }
.evidence-step p { margin: 0; color: #718596; font-size: .72rem; line-height: 1.55; }
.evidence-step button, .queue-actions button, .queue-actions a { margin-top: auto; padding: .42rem .58rem; border: 1px solid #d6e3ec; border-radius: 8px; background: #fff; color: #3d617c; font-weight: 850; cursor: pointer; text-align: center; text-decoration: none; }
.evidence-step textarea { min-height: 64px; resize: vertical; padding: .55rem; border: 1px solid #d8e4ec; border-radius: 8px; background: #fff; color: #405c70; font: inherit; font-size: .75rem; line-height: 1.5; }
.queue-actions { display: flex; gap: .4rem; flex-wrap: wrap; padding: .75rem .9rem; border-top: 1px solid #e5edf2; background: #fbfdfe; }
.queue-actions .remove { margin-left: auto; color: #ad4650; }
.queue-actions button:disabled { opacity: .42; cursor: not-allowed; }

.wrong-list, .daily-route-list { display: grid; gap: .7rem; }
.wrong-card, .daily-route-item { padding: .9rem; border: 1px solid #dfe8f1; border-radius: 12px; background: #fff; }
.wrong-card__head, .daily-route-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.wrong-card__head span, .daily-route-head span { padding: .22rem .5rem; border-radius: 999px; background: #fff2f2; color: #ad3b47; font-size: .72rem; font-weight: 900; }
.wrong-card p, .daily-route-item p { margin: .45rem 0; color: #526a80; line-height: 1.65; }
.wrong-answer { padding: .7rem; border-radius: 9px; background: #f0faf6; color: #245f4c; }
.wrong-actions, .daily-actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .65rem; }
.wrong-actions button, .daily-actions button { min-height: 36px; padding: .42rem .65rem; border: 1px solid #d9e4ee; border-radius: 8px; background: #f8fbff; color: #3d5d78; font-weight: 850; cursor: pointer; }
.wrong-actions .master { border-color: #82d3b4; background: #edf9f4; color: #167254; }
.daily-overview { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem; border-radius: 12px; background: #eef7ff; color: #315f83; }
.daily-progress { height: 8px; overflow: hidden; margin-top: .55rem; border-radius: 999px; background: #dce8f2; }
.daily-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #568be7, #31c7ce); }
.daily-checks { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .55rem; }
.daily-checks label { display: flex; align-items: center; gap: .35rem; color: #557087; font-size: .8rem; font-weight: 800; }
.daily-checks input { accent-color: #28a77c; }
.studio-empty { padding: 1.3rem; border: 1px dashed #cbd8e5; border-radius: 12px; text-align: center; color: #718398; background: rgba(255, 255, 255, .72); line-height: 1.7; }

@media (max-width: 900px) {
  .queue-builder { grid-template-columns: 1fr 1fr; }
  .queue-builder label:first-child { grid-column: 1 / -1; }
  .queue-evidence-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .studio-head { flex-direction: column; }
  .studio-head-actions { justify-items: start; }
  .studio-metrics { justify-content: flex-start; }
  .studio-body { padding: .85rem; }
  .quiz-options, .flashcard-answer-grid { grid-template-columns: 1fr; }
  .compare-controls { grid-template-columns: 1fr; }
  .compare-versus { display: none; }
  .compare-table { grid-template-columns: 90px 1fr 1fr; font-size: .82rem; }
  .queue-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-builder { grid-template-columns: 1fr; }
  .queue-builder label:first-child { grid-column: auto; }
  .queue-toolbar { align-items: flex-start; flex-direction: column; }
  .queue-topic__head { grid-template-columns: auto minmax(0, 1fr); }
  .queue-topic__score { grid-column: 2; text-align: left; }
  .review-result-grid { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .review-progress span, .studio-actions button, .studio-actions a { transition: none; }
}