* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #f6f7f9; }
header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: #11181c; color: #fff; }
header h1 { font-size: 1.1rem; margin: 0; }
section { max-width: 900px; margin: 1.5rem auto; padding: 0 1.5rem; }
form { display: flex; gap: .5rem; flex-wrap: wrap; }
input { padding: .5rem .6rem; border: 1px solid #ccc; border-radius: 6px; flex: 1 1 240px; }
button { padding: .5rem .9rem; border: 0; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; }
button#logout-btn { background: #6b7280; }
.error { color: #b91c1c; }
.muted { color: #6b7280; }
.grade-header { display: flex; gap: 1rem; align-items: center; background: #fff; padding: 1rem; border-radius: 8px; margin: 1rem 0; }
.grade-badge { width: 64px; height: 64px; border-radius: 10px; color: #fff; font-size: 2.2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.grade-target { font-weight: 700; font-size: 1.05rem; }
.pills { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.pill { color: #fff; border-radius: 10px; padding: .1rem .55rem; font-size: .72rem; }
.section-card { background: #fff; border-radius: 8px; margin: .75rem 0; overflow: hidden; }
.section-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid #eee; }
.section-title { font-weight: 600; flex: 1; }
.section-rollup { color: #6b7280; font-size: .8rem; }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.item { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid #f1f1f1; }
.item:last-child { border-bottom: 0; }
.item .dot { margin-top: .3rem; }
.item-body { flex: 1; }
.item-title { font-weight: 600; font-size: .92rem; }
.item-desc { color: #555; font-size: .85rem; }
.item-body code { display: inline-block; margin-top: .25rem; font-size: .78rem; background: #f4f4f5; padding: .05rem .35rem; border-radius: 4px; word-break: break-all; }
.item-docs { flex: none; color: #2563eb; text-decoration: none; font-size: .82rem; white-space: nowrap; }
.share-box { margin-left: auto; align-self: flex-start; display: flex; align-items: center; gap: .5rem; }
.share-link { color: #6b7280; font-size: .8rem; word-break: break-all; max-width: 280px; }
ul#history { list-style: none; padding: 0; }
ul#history li { background: #fff; padding: .5rem .8rem; margin: .35rem 0; border-radius: 6px; display: flex; justify-content: space-between; gap: 1rem; }
ul#history a { cursor: pointer; color: #2563eb; }
ul#history li.selected { box-shadow: inset 3px 0 0 #2563eb; background: #eef2ff; }
.history-remove { background: transparent; color: #9ca3af; padding: 0 .4rem; font-size: 1rem; line-height: 1; }
.history-remove:hover { color: #b91c1c; }