* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: system-ui, "Segoe UI", Arial, sans-serif; background: #f5f5f7; color: #1a1a1a; }

#app { display: grid; grid-template-columns: 380px 1fr; height: 100vh; }

.sidebar { display: flex; flex-direction: column; border-inline-start: 1px solid #ddd; background: #fff; min-height: 0; }
.sidebar header { padding: 16px; border-bottom: 1px solid #eee; }
.sidebar header h1 { margin: 0 0 8px; font-size: 20px; }
.stats { font-size: 12px; color: #555; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.stats .chip { background: #eef; padding: 3px 8px; border-radius: 999px; }

.tabs { display: flex; gap: 6px; }
.tabs button { font: inherit; font-size: 12px; padding: 6px 10px; border: 1px solid #ccc; background: #fafafa; border-radius: 6px; cursor: pointer; }
.tabs button.active { background: #3a66d6; color: #fff; border-color: #3a66d6; }

.filters, .ai-search { padding: 12px 16px; border-bottom: 1px solid #eee; display: flex; flex-direction: column; gap: 8px; }
.filters label, .ai-search label { display: flex; flex-direction: column; font-size: 12px; color: #333; gap: 4px; }
.filters select, .filters input, .ai-search textarea {
  font: inherit; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; background: #fff;
}
.ai-search textarea { resize: vertical; min-height: 44px; }
.ai-search .row { display: flex; gap: 6px; }
.ai-search button { padding: 6px 12px; border: 0; background: #3a66d6; color: #fff; border-radius: 6px; cursor: pointer; font: inherit; }
.ai-search button.ghost { background: #eee; color: #333; }
.muted { color: #777; font-size: 12px; min-height: 1.2em; margin: 0; }

.tags-row { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chip { font-size: 11px; padding: 2px 8px; background: #f0f4ff; border: 1px solid #cdd8f3; border-radius: 999px; cursor: pointer; user-select: none; }
.tag-chip.selected { background: #3a66d6; color: #fff; border-color: #3a66d6; }

.list { flex: 1; overflow-y: auto; }
.list .item { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.list .item:hover { background: #fafafa; }
.list .item.active { background: #eef3ff; }
.list .item .meta { font-size: 11px; color: #666; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.list .item .title { font-size: 13px; font-weight: 600; }
.list .item .preview { font-size: 11px; color: #555; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.badge.not_practiced { background: #e3e3e3; color: #555; }
.badge.practiced { background: #cdeccd; color: #2a6b2a; }
.badge.needs_review { background: #fde4c2; color: #8a4b00; }

.content { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* #detail must be a flex column so the .pdf-area can flex: 1 to fill the
   remaining height. Without this the iframe falls back to ~150px. */
#detail { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#detail.empty { align-items: center; justify-content: center; color: #888; font-size: 18px; padding: 24px; }
.detail-head { padding: 12px 16px; border-bottom: 1px solid #eee; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: #fff; }
.detail-head h2 { margin: 0; font-size: 16px; }
.detail-head .meta { color: #666; font-size: 12px; }
.toolbar { display: flex; gap: 6px; padding: 8px 16px; background: #fafafa; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.toolbar button { font: inherit; padding: 6px 12px; border: 1px solid #bbb; background: #fff; border-radius: 6px; cursor: pointer; }
.toolbar button.primary { background: #3a66d6; color: #fff; border-color: #3a66d6; }
.toolbar button.active { background: #3a66d6; color: #fff; border-color: #3a66d6; }
.toolbar .spacer { flex: 1; }
.toolbar .tag-list { display: flex; gap: 4px; flex-wrap: wrap; }
.toolbar .tag-list .tag { font-size: 11px; background: #f0f4ff; padding: 2px 8px; border-radius: 999px; }

.status-group { display: flex; gap: 6px; }
.status-group button { font: inherit; padding: 6px 10px; border-radius: 6px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
.status-group button.active { background: #3a66d6; color: #fff; border-color: #3a66d6; }

.grade-group { display: flex; gap: 6px; padding: 8px 16px; background: #fff3cd; border-bottom: 1px solid #e6d18f; }
.grade-group button { font: inherit; padding: 6px 12px; border-radius: 6px; border: 1px solid #c9a227; background: #fff; cursor: pointer; }
.grade-group button[data-g=again] { color: #b00020; border-color: #b00020; }
.grade-group button[data-g=easy]  { color: #2a6b2a; border-color: #2a6b2a; }

.pdf-area { flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr; }
.pdf-area.with-answer { grid-template-rows: 1fr 1fr; }
.pdf-area.with-drawer { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; }
/* flex:1 so that when a PDF iframe is a direct flex-column child of #detail
   (e.g. the resource viewer) it fills the available height. Inside .pdf-area
   the grid 1fr row handles sizing; either way width/height 100% takes over. */
.pdf-frame { width: 100%; height: 100%; border: 0; background: #222; flex: 1; min-height: 0; }
.answer-pane { border-block-start: 1px dashed #999; display: flex; flex-direction: column; }
.answer-pane .answer-title { padding: 4px 10px; font-size: 12px; background: #fff3cd; color: #8a4b00; border-block-end: 1px solid #e6d18f; }

.hint-drawer {
  border-inline-start: 1px solid #ddd; background: #fffef8; display: flex; flex-direction: column;
  overflow: hidden;
}
.hint-drawer header { padding: 10px 14px; border-bottom: 1px solid #e6d18f; background: #fff8dc; display: flex; align-items: center; gap: 8px; }
.hint-drawer header h3 { margin: 0; font-size: 13px; }
.hint-drawer .actions { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.hint-drawer .actions button { font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid #c9a227; background: #fff; border-radius: 6px; cursor: pointer; }
.hint-drawer .messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.hint-message { background: #fff; border: 1px solid #eadf9c; border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.hint-message h5 { margin: 0 0 4px; font-size: 11px; color: #8a6d00; }

.modal { position: fixed; inset: 0; background: rgba(20,20,30,0.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
.modal .card { background: #fff; border-radius: 10px; padding: 20px; max-width: 560px; width: 90%; max-height: 80vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.modal h3 { margin: 0; }
.modal .close { background: #eee; border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer; align-self: flex-end; }
.modal input[type=file] { padding: 8px; border: 1px dashed #aaa; border-radius: 8px; background: #fafafa; }
.modal button.primary { padding: 8px 14px; background: #3a66d6; color: #fff; border: 0; border-radius: 6px; cursor: pointer; font: inherit; align-self: flex-start; }
.modal .feedback { white-space: pre-wrap; background: #fafffa; border: 1px solid #cfe6cf; padding: 10px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.modal .error { color: #b00020; font-size: 12px; }

.resources-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 16px; overflow-y: auto; align-content: start; }
.resource-card { background: #fff; border: 1px solid #e1e1e6; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.resource-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.resource-card .kind { font-size: 11px; color: #888; }
.resource-card .title { font-weight: 600; font-size: 14px; }
.resource-card .src { font-size: 11px; color: #666; }

.err { color: #b00020; min-height: 1.2em; margin: 8px 0 0; }

/* Login */
body.login { display: flex; align-items: center; justify-content: center; background: #1b2030; color: #fff; }
.login-card { background: #252c42; padding: 32px 28px; border-radius: 12px; min-width: 320px; }
.login-card h1 { margin: 0 0 20px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card input { padding: 10px; border-radius: 6px; border: 0; font-size: 16px; }
.login-card button { padding: 10px; background: #3a66d6; color: #fff; border: 0; border-radius: 6px; font-size: 16px; cursor: pointer; }

@media (max-width: 720px) {
  #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar { max-height: 50vh; }
  .pdf-area.with-drawer { grid-template-columns: 1fr; grid-template-rows: 1fr 300px; }
}