.btl-app {
  --btl-app-blue: #3449df;
  --btl-app-ink: #202534;
  --btl-app-muted: #5f6878;
  --btl-app-border: #e5e7ee;
  --btl-app-bg: #f7f8fb;
  min-height: 100vh;
  background: var(--btl-app-bg);
  color: var(--btl-app-ink);
  font-family: "BTL Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.018em;
  -webkit-font-smoothing: antialiased;
}
.btl-app *, .btl-app *::before, .btl-app *::after { box-sizing: border-box; }
.btl-app button, .btl-app input, .btl-app select, .btl-app textarea { font-family: inherit; }
.btl-app button, .btl-app a { -webkit-tap-highlight-color: transparent; }
.btl-app button:focus-visible, .btl-app a:focus-visible { outline: 2px solid #3449df; outline-offset: 3px; }
.btl-app .font-black { font-weight: 700; }
.btl-app .text-slate-400 { color: #778190; }
.btl-app .rounded-3xl { border-radius: 12px; }
.btl-app .rounded-2xl { border-radius: 10px; }
.btl-app .rounded-xl { border-radius: 8px; }
.btl-app :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  border-color: #dfe3eb !important; border-radius: 7px !important; box-shadow: none !important;
  color: #202534 !important; caret-color: #3449df;
}
.btl-app :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { border-color: #6d7bea !important; box-shadow: 0 0 0 3px #3449df14 !important; }
.btl-app-workspace { min-width: 0; }
.btl-app--teacher .btl-app-workspace { margin-left: var(--btl-nav-width); padding: 28px 32px 40px; transition: margin-left 160ms ease; }
.btl-app--student .btl-app-workspace { max-width: 1200px; margin: auto; padding: 24px; }
.btl-app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--btl-nav-width); display: flex; flex-direction: column; background: #fff; border-right: 1px solid #e5e7ee; transition: width 160ms ease; }
.btl-app-sidebar-brand { height: 85px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 17px; }
.btl-app-brand { display: flex; align-items: center; gap: 9px; border: 0; padding: 0; background: transparent; color: #202534; white-space: nowrap; cursor: pointer; min-height: 40px; }
.btl-app-brand img { width: 32px; height: 32px; flex: 0 0 32px; }
.btl-app-brand-name { font-weight: 800; font-size: 19px; letter-spacing: -.065em; }
.btl-app-brand-name > span { margin-left: 3px; font-weight: 500; }
.btl-app-collapse { display: flex; align-items: center; justify-content: center; margin-left: auto; width: 28px; height: 40px; flex-shrink: 0; color: #7b8390; background: transparent; border: 0; cursor: pointer; border-radius: 6px; }
.btl-app-collapse:hover { background: #f3f4f8; color: #3449df; }
.btl-app-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 16px; scrollbar-width: thin; scrollbar-color: #d5d9e3 transparent; }
.btl-app-nav-group + .btl-app-nav-group { margin-top: 22px; }
.btl-app-nav-label { color: #8b919c; font-size: 11px; font-weight: 600; margin: 0 11px 7px; }
.btl-app-nav-item { width: 100%; display: flex; align-items: center; gap: 11px; min-height: 41px; padding: 8px 11px; margin: 2px 0; background: transparent; border: 0; border-radius: 7px; color: #666f7e; font-size: 13px; font-weight: 550; text-align: left; cursor: pointer; transition: color 140ms, background-color 140ms; }
.btl-app-nav-item svg { flex: 0 0 auto; opacity: .85; }
.btl-app-nav-item:hover { background: #f5f6f9; color: #202534; }
.btl-app-nav-item.is-active { color: #3449df; background: #edf0ff; font-weight: 700; }
.btl-app-nav-item.is-active svg { opacity: 1; }
.btl-app-sidebar-footer { border-top: 1px solid #eef0f4; margin: 0 16px; padding: 14px 0 16px; }
.btl-app-presence { display: flex; gap: 7px; align-items: center; border: 0; background: transparent; color: #78818e; font-size: 11px; min-height: 28px; margin: 0 3px 5px; padding: 0; cursor: pointer; }
.btl-app-presence-dot { width: 6px; height: 6px; border-radius: 50%; background: #31a581; }
.btl-app-utilities { display: flex; align-items: center; gap: 4px; }
.btl-app-utilities > button, .btl-app-utilities > a { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 38px; height: 38px; background: transparent; border: 0; color: #838b98; cursor: pointer; border-radius: 7px; text-decoration: none; }
.btl-app-utilities > :hover { background: #f3f5fa; color: #3449df; }
.btl-app-mobile-utilities { display: none; }
.btl-app-unread { position: absolute; top: 0; right: 0; min-width: 14px; border-radius: 8px; padding: 0 3px; background: #d64d58; color: white; font-size: 9px; }
.btl-app-sidebar-user { margin-top: 13px; padding-top: 14px; border-top: 1px solid #eef0f4; display: flex; gap: 9px; align-items: center; color: #5f6878; font-size: 11px; white-space: nowrap; }
.btl-app-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f0f2f7; color: #6c7483; flex-shrink: 0; }
.btl-app-sidebar.is-collapsed .btl-app-sidebar-brand { height: 105px; flex-direction: column; gap: 0; padding: 15px 0 0; }
.btl-app-sidebar.is-collapsed .btl-app-collapse { margin: 0; height: 28px; }
.btl-app-sidebar.is-collapsed .btl-app-brand-name, .btl-app-sidebar.is-collapsed .btl-app-nav-label, .btl-app-sidebar.is-collapsed .btl-app-nav-item > span, .btl-app-sidebar.is-collapsed .btl-app-presence-label, .btl-app-sidebar.is-collapsed .btl-app-sidebar-user { display: none; }
.btl-app-sidebar.is-collapsed .btl-app-nav { padding-inline: 9px; }
.btl-app-sidebar.is-collapsed .btl-app-nav-item { justify-content: center; padding-inline: 0; }
.btl-app-sidebar.is-collapsed .btl-app-nav-group + .btl-app-nav-group { border-top: 1px solid #eef0f4; padding-top: 12px; margin-top: 12px; }
.btl-app-sidebar.is-collapsed .btl-app-sidebar-footer { margin-inline: 10px; }
.btl-app-sidebar.is-collapsed .btl-app-utilities { flex-direction: column; }
.btl-app-sidebar.is-collapsed .btl-app-presence { justify-content: center; }
.btl-app-page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; min-height: 56px; }
.btl-app-page-header h1 { font-size: 26px; font-weight: 750; line-height: 1.3; letter-spacing: -.045em; margin: 0; }
.btl-app-page-header p { color: #7a8290; font-size: 13px; margin: 7px 0 0; }
.btl-app-today { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; color: #818896; font-size: 12px; }
.btl-app-header-status { display: flex; align-items: center; gap: 12px; }
.btl-app-saving { color: #66748c; font-size: 12px; white-space: nowrap; }
.btl-dashboard-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.btl-summary-action { cursor: pointer; border: 0; padding: 0; background: transparent; text-align: left; border-radius: 12px; }
.btl-summary-action .btl-ui-card { height: 100%; transition: box-shadow 140ms; }
.btl-summary-action:hover .btl-ui-card { box-shadow: 0 0 0 1px #bdc5fa; }
.btl-dashboard-panels { display: grid; grid-template-columns: minmax(285px,.85fr) minmax(0,1.35fr); gap: 20px; align-items: start; }
.btl-app .btl-dashboard-panel { min-width: 0; padding: 20px; }
.btl-dashboard-panel h2 { font-size: 16px; font-weight: 700; letter-spacing: -.025em; }
.btl-dashboard-detail-heading { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 12px; }
.btl-dashboard-detail-heading p { margin-top: 4px; font-size: 12px; }
.btl-student-filters { padding-bottom: 15px; border-bottom: 1px solid #edf0f5; }
.btl-student-filter { border: 0; background: transparent; color: #717b8b; border-radius: 5px; padding: 5px 8px; min-height: 32px; font-size: 12px; font-weight: 500; cursor: pointer; }
.btl-student-filter:hover { background: #f4f5f9; }
.btl-student-filter.is-active { background: #edf0ff; color: #3449df; font-weight: 700; }
.btl-student-list { display: grid; grid-template-columns: minmax(0,1fr); max-height: 570px; overflow-y: auto; padding-right: 3px; }
.btl-student-row { padding: 12px 9px; border: 0; border-bottom: 1px solid #eef0f4; background: white; text-align: left; border-radius: 6px; cursor: pointer; transition: background-color 120ms; }
.btl-student-row:hover { background: #f7f8fc; }
.btl-student-row.is-active { background: #f0f3ff; box-shadow: inset 3px 0 #3449df; }
.btl-student-row .btl-ui-progress { height: 3px; }
.btl-student-row .btl-ui-badge { font-size: 10px; padding: 1px 5px; }
.btl-student-row-meta { margin-top: 5px; font-size: 11px; color: #8991a0; }
.btl-app .btl-homework-card { border-radius: 8px; box-shadow: none; }
.btl-app .btl-homework-card:not(.border-red-300):not(.border-emerald-300) { border-color: #e5e7ee; }
.btl-dashboard-summary > :nth-child(3) { --btl-ui-ink: #3449df; background: #f0f3ff; }
@media (max-width: 1199px) {
  .btl-app--teacher .btl-app-workspace { padding: 25px 24px 32px; }
  .btl-dashboard-panels { grid-template-columns: minmax(0,1fr); }
  .btl-student-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; max-height: 310px; }
  .btl-app-page-header { align-items: start; }
  .btl-app-today { padding-top: 7px; font-size: 11px; }
}
@media (max-width: 760px) {
  .btl-app--teacher .btl-app-workspace { margin-left: 0; padding: 22px 16px 32px; }
  .btl-app-sidebar { position: sticky; width: calc(100% + 32px); margin: -22px -16px 24px; inset: 0 0 auto; border-right: 0; border-bottom: 1px solid #e5e7ee; }
  .btl-app-sidebar .btl-app-sidebar-brand, .btl-app-sidebar.is-collapsed .btl-app-sidebar-brand { height: 60px; padding: 0 17px; flex-direction: row; }
  .btl-app-sidebar .btl-app-collapse { display: none; }
  .btl-app-sidebar.is-collapsed .btl-app-brand-name { display: inline; }
  .btl-app-nav, .btl-app-sidebar.is-collapsed .btl-app-nav { display: flex; gap: 5px; padding: 0 12px 8px; overflow-x: auto; overscroll-behavior-inline: contain; }
  .btl-app-nav-group { display: contents; }
  .btl-app-nav-label { display: none; }
  .btl-app-nav-item, .btl-app-sidebar.is-collapsed .btl-app-nav-item { padding: 8px 11px; width: auto; flex-shrink: 0; gap: 6px; min-height: 38px; }
  .btl-app-sidebar.is-collapsed .btl-app-nav-item > span { display: inline; }
  .btl-app-nav-item svg { width: 16px; }
  .btl-app-sidebar-footer, .btl-app-sidebar.is-collapsed .btl-app-sidebar-footer { position: absolute; right: 12px; top: 11px; padding: 0; margin: 0; border: 0; }
  .btl-app-sidebar .btl-app-utilities { flex-direction: row; }
  .btl-app-sidebar .btl-app-presence, .btl-app-sidebar-user, .btl-app-utilities > .btl-app-desktop-utility { display: none; }
  .btl-app-mobile-utilities { display: block; position: relative; border-radius: 7px; }
  .btl-app-mobile-utilities > summary { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 7px; list-style: none; color: #687183; cursor: pointer; }
  .btl-app-mobile-utilities > summary::-webkit-details-marker { display: none; }
  .btl-app-mobile-utilities > summary:focus-visible { outline: 2px solid #3449df; outline-offset: 2px; }
  .btl-app-mobile-utilities[open] > summary { color: #3449df; background: #edf0ff; }
  .btl-app-mobile-utility-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 200px; max-width: calc(100vw - 32px); padding: 5px; border: 1px solid #e5e7ee; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgb(32 37 52 / 10%); }
  .btl-app-mobile-utility-menu > button, .btl-app-mobile-utility-menu > a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 10px; border: 0; border-radius: 6px; background: transparent; color: #424b5c; font-size: 12px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
  .btl-app-mobile-utility-menu > :hover { background: #f5f6fa; color: #3449df; }
  .btl-app-mobile-utility-menu > :focus-visible { outline-offset: -2px; }
  .btl-app-mobile-utility-menu > :last-child { margin-top: 3px; border-top: 1px solid #eef0f4; border-radius: 0 0 6px 6px; }
  .btl-app-mobile-presence { display: block; margin-top: 2px; color: #838b98; font-size: 10px; font-weight: 400; }
  .btl-app-page-header { margin-bottom: 20px; }
  .btl-app-page-header h1 { font-size: 23px; }
  .btl-app-page-header p { font-size: 12px; }
  .btl-app-today { display: none; }
  .btl-dashboard-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .btl-app .btl-dashboard-panel { padding: 16px; }
  .btl-student-list { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) { .btl-app *, .btl-app *::before, .btl-app *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }