:root {
  --rug-red: #C10A28;
  --ink: #1c1c1e;
  --paper: #fbfaf8;
  --hairline: #e6e3df;
  --muted: #7a7772;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap { max-width: 560px; margin: 0 auto; padding: 28px 20px 60px; }

.header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.header .logo { width: 36px; height: 36px; border-radius: 8px; }
.header h1 { font-size: 20px; margin: 0; }

.section {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.section h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rug-red);
  margin: 0 0 12px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 6px;
}
label:first-of-type { margin-top: 0; }

input[type="text"], input[type="password"], input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}
input:focus { outline: 2px solid var(--rug-red); outline-offset: 1px; }

.secret-row { display: flex; gap: 8px; }
.secret-row input { flex: 1; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.help { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 8px 0 0; }
.help code { background: #f1efeb; padding: 1px 4px; border-radius: 4px; }

.ghost-btn {
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ghost-btn:hover { border-color: var(--rug-red); color: var(--rug-red); }

.actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.primary-btn {
  background: var(--rug-red);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.primary-btn:hover { background: #93081e; }
.save-status { font-size: 12.5px; color: var(--muted); }

/* Courses & books */
.course-card {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #fdfcfb;
}
.course-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.course-name-input {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  border-radius: 6px;
}
.course-name-input:hover, .course-name-input:focus {
  border-color: var(--hairline);
  background: #fff;
}
.delete-course-btn {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 11.5px;
  padding: 5px 9px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.delete-course-btn:hover { border-color: var(--rug-red); color: var(--rug-red); }

.books-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.book-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  padding: 6px 8px;
}
.book-row .book-title { font-weight: 600; }
.book-row .book-url {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.book-row .remove-book-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.book-row .remove-book-btn:hover { color: var(--rug-red); }

.add-book-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 6px;
}
.add-book-row input {
  font-size: 12.5px;
  padding: 6px 8px;
}
.add-book-row button {
  margin-top: 0;
  padding: 6px 10px;
  font-size: 12px;
}

.add-course-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.add-course-row input { flex: 1; }
.add-course-row button { margin-top: 0; white-space: nowrap; }

body{padding-bottom:env(safe-area-inset-bottom)}.wrap{padding:24px 14px 60px}.section{padding:18px 16px}input[type=file]{width:100%;max-width:100%;font-size:13px}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.back-link{text-decoration:none;display:inline-block}.book-row{overflow-wrap:anywhere}@media(max-width:480px){.add-book-row{display:flex;flex-direction:column;align-items:stretch}.add-book-row input,.add-book-row button{width:100%}}

.book-row{flex-wrap:wrap;gap:8px}.book-title-input{min-width:135px;flex:1;font-weight:600}
.book-row .book-url{min-width:155px;flex:1}
.book-pdf-label,.inline-book-open,.book-switch-link{font-size:12px;border:1px solid var(--hairline);padding:7px 10px;border-radius:7px;color:var(--rug-red);background:white;text-decoration:none;cursor:pointer;white-space:nowrap}
.book-pdf-label input{width:1px;height:1px;position:absolute;overflow:hidden;clip-path:inset(50%)}
.book-row{align-items:center}