/* JLPT180 notebook collection: locally scoped, mobile-first, Astra-resistant. */
#jlpt180-books-app,
#jlpt180-books-app * ,
.ptt-book-overlay,
.ptt-book-overlay * { box-sizing: border-box; }

#jlpt180-books-app {
  position: relative;
  width: min(1160px, calc(100vw - 24px));
  max-width: none;
  min-width: 0;
  margin: 18px auto 64px;
  padding: 0;
  color: #341650;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  text-align: left;
  overflow-wrap: anywhere;
}
#jlpt180-books-app :is(h1,h2,p,small,label,a,span,input,select,button),
.ptt-book-overlay :is(h2,p,label,a,span,input,select,button) {
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
#jlpt180-books-app :is(a,button,input,select), .ptt-book-overlay :is(a,button,input,select) {
  -webkit-tap-highlight-color: transparent;
}
#jlpt180-books-app a,
.ptt-book-overlay a { color: #6023ad; text-decoration: none; }
#jlpt180-books-app :is(a,button,input,select):focus-visible,
.ptt-book-overlay :is(a,button,input,select):focus-visible {
  outline: 3px solid #e35aa5;
  outline-offset: 3px;
}
#jlpt180-books-app .ptt-book-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 15px;
  margin: 0 0 14px;
  border: 1px solid #e6b2dc;
  border-radius: 999px;
  background: #fff9ff;
  color: #6023ad !important;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none !important;
  box-shadow: 0 3px 12px #6e2fb51a;
}
#jlpt180-books-app .ptt-book-back:hover { background: #f5e8ff; }
#jlpt180-books-app .ptt-book-panel {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  padding: clamp(18px, 3vw, 36px);
  border: 2px solid #a954dc !important;
  border-radius: 26px !important;
  background: radial-gradient(circle at 93% 0%, #ffe2f6 0%, transparent 33%),
              linear-gradient(155deg, #fffaff 0%, #fffdfd 44%, #fcf4ff 100%) !important;
  box-shadow: 0 20px 45px #4b137b20, 0 4px 12px #8a33952b, inset 0 1px 0 #fff !important;
}
#jlpt180-books-app .ptt-book-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -65px;
  right: -45px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffb7e64d, #ffb7e600 71%);
}
#jlpt180-books-app h1 {
  margin: 4px 0 9px !important;
  color: #381167 !important;
  font-size: clamp(26px, 3.5vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em;
}
#jlpt180-books-app h1::before { content: "✦"; display: inline-block; padding-right: 10px; color: #cb3594; font-size: .65em; vertical-align: 9%; }
#jlpt180-books-app h2 { margin: 0; font-size: clamp(20px, 2.5vw, 26px) !important; font-weight: 900; line-height: 1.24; }
#jlpt180-books-app .ptt-book-panel > p { max-width: 880px; margin: 4px 0 20px; color: #634876; font-size: 15px; line-height: 1.7; }
#jlpt180-books-app :is(.ptt-book-create,.ptt-book-edit) {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  align-items: end;
  margin: 24px 0;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid #e5b2ec;
  border-radius: 19px;
  background: linear-gradient(125deg, #fbebff, #fff0f9 60%, #fff9ec);
  box-shadow: inset 0 1px #fff, 0 4px 17px #8036a50d;
}
#jlpt180-books-app .ptt-book-edit { grid-template-columns: repeat(2,minmax(0,1fr)); }
#jlpt180-books-app :is(.ptt-book-create,.ptt-book-edit)::before {
  content: "Tạo bộ sưu tập mới";
  grid-column: 1 / -1;
  color: #6b208c;
  font-size: 17px;
  font-weight: 900;
}
#jlpt180-books-app .ptt-book-edit::before { content: "Chỉnh sửa bộ sưu tập"; }
#jlpt180-books-app :is(.ptt-book-create,.ptt-book-edit) label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  color: #49216c !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.4;
}
#jlpt180-books-app :is(.ptt-book-create,.ptt-book-edit) :is(input,select),
.ptt-book-overlay :is(input,select) {
  display: block;
  width: 100%;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 10px 13px;
  border: 1.5px solid #ae85cf;
  border-radius: 12px;
  background: #fff !important;
  color: #362049 !important;
  font: 500 15px/1.35 system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif !important;
  box-shadow: none;
}
#jlpt180-books-app :is(.ptt-book-create,.ptt-book-edit) input::placeholder { color: #907e9e; opacity: 1; }
#jlpt180-books-app :is(button), .ptt-book-overlay button {
  min-height: 46px;
  border: 1px solid #6824c3;
  border-radius: 12px;
  padding: 10px 17px;
  background: linear-gradient(135deg, #8a37e3, #581bd0) !important;
  box-shadow: 0 5px 12px #6025ac30;
  color: #fff !important;
  font: 800 15px/1.3 system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  text-decoration: none !important;
  cursor: pointer;
}
#jlpt180-books-app :is(button):hover, .ptt-book-overlay button:hover { filter: brightness(1.075); }
#jlpt180-books-app :is(button):disabled, .ptt-book-overlay button:disabled { opacity: .6; cursor: wait; }
#jlpt180-books-app :is(.ptt-book-create,.ptt-book-edit) > button { grid-column: 1 / -1; justify-self: start; }
#jlpt180-books-app .ptt-book-grid,
#jlpt180-books-app .ptt-book-word-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px;
  margin: 22px 0;
  min-width: 0;
}
#jlpt180-books-app .ptt-book-tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-height: 245px;
  min-width: 0;
  overflow: hidden;
  padding: 25px 26px 22px 36px;
  border: 2px solid #ce4b9b !important;
  border-radius: 21px !important;
  background: linear-gradient(133deg,#ff64b2 0%,#e22f86 49%,#8c276e 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 27px #a52c783d, inset 0 1px #ffb9e7 !important;
  text-align: left;
}
#jlpt180-books-app .ptt-book-tile:nth-child(4n+2) {
  border-color: #8450d8 !important;
  background: linear-gradient(134deg,#a97aff 0%,#7840dc 55%,#431b91 100%) !important;
  box-shadow: 0 14px 27px #5732aa42, inset 0 1px #ddc8ff !important;
}
#jlpt180-books-app .ptt-book-tile:nth-child(4n+3) {
  border-color: #af6725 !important;
  background: linear-gradient(135deg,#f9bb5f,#db7c41 52%,#9c3978 100%) !important;
}
#jlpt180-books-app .ptt-book-tile:nth-child(4n+4) {
  border-color: #14887d !important;
  background: linear-gradient(135deg,#4dbb9b,#168b88 52%,#3c428e 100%) !important;
}
#jlpt180-books-app .ptt-book-tile::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 13px;
  bottom: 13px;
  left: 12px;
  width: 5px;
  border-radius: 100px;
  background: linear-gradient(#fffbe8,#ffdf97,#fffbe8);
  box-shadow: 0 0 12px #fff3adac;
}
#jlpt180-books-app .ptt-book-tile::after {
  content: "✦";
  position: absolute;
  z-index: -1;
  top: -46px;
  right: -18px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle,#ffffff4a,#ffffff00 69%);
  color: #ffffffa8;
  text-align: center;
  font: 90px/185px Georgia,serif;
  transform: rotate(18deg);
  pointer-events: none;
}
#jlpt180-books-app .ptt-book-tile :is(h2,p,small,strong,span,a) {
  color: #fff !important;
  text-decoration: none !important;
}
#jlpt180-books-app .ptt-book-tile h2 { margin: 6px 0 2px !important; max-width: 100%; }
#jlpt180-books-app .ptt-book-tile h2 a { display: inline; color: #fff !important; text-decoration: none !important; font-weight: 900; overflow-wrap: anywhere; }
#jlpt180-books-app .ptt-book-tile h2 a:hover { text-decoration: underline !important; }
#jlpt180-books-app .ptt-book-tile p { margin: 2px 0 0; font-weight: 500; line-height: 1.5; opacity: .96; }
#jlpt180-books-app .ptt-book-type,
#jlpt180-books-app .ptt-book-labels span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid #dfbaed;
  border-radius: 999px;
  padding: 4px 11px;
  background: #f6e9ff;
  color: #532486;
  font-size: 12px;
  font-weight: 850;
}
#jlpt180-books-app .ptt-book-tile .ptt-book-type {
  background: #fff7d7 !important;
  border: 1px solid #ffeab3;
  color: #6f2b68 !important;
  font-weight: 900;
}
#jlpt180-books-app .ptt-book-tile small {
  display: block;
  margin-top: auto;
  padding-top: 8px;
  color: #fff6f9 !important;
  font-size: 13px;
  font-weight: 750;
}
#jlpt180-books-app .ptt-book-tile a.ptt-book-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 10px 16px;
  border: 1px solid #fff;
  border-radius: 12px;
  background: #fff !important;
  color: #58209e !important;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none !important;
  box-shadow: 0 4px 13px #2b0d5030;
}
#jlpt180-books-app .ptt-book-tile a.ptt-book-open:hover { background: #fff4d9 !important; }
#jlpt180-books-app .ptt-book-word {
  min-width: 0;
  padding: 18px;
  border: 1.5px solid #d9b4e9;
  border-radius: 17px !important;
  background: linear-gradient(135deg,#fff,#f8efff) !important;
  box-shadow: 0 5px 16px #4d1a7515;
}
#jlpt180-books-app .ptt-book-word-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 24px; font-weight: 900; }
#jlpt180-books-app .ptt-book-word-title a { color: #412076 !important; text-decoration: none !important; }
#jlpt180-books-app .ptt-book-word-title span { color: #087e78; font-size: 14px; }
#jlpt180-books-app .ptt-book-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
#jlpt180-books-app .ptt-book-word p { margin: 10px 0; color: #321b4e; font-weight: 600; }
#jlpt180-books-app .ptt-book-owner-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 15px 0 22px; }
#jlpt180-books-app button.ptt-book-danger { border-color: #d34f75; background: #fff0f4 !important; color: #9b2251 !important; box-shadow: none; }
#jlpt180-books-app button.ptt-book-remove { border: 1px solid #b78cda; background: #fff !important; color: #5d298c !important; box-shadow: none; }
#jlpt180-books-app .ptt-book-readonly { color: #725c7e; }
#jlpt180-books-app .ptt-book-feedback, .ptt-book-modal-status { min-height: 24px; color: #1d7051; font-size: 13px; font-weight: 700; }
#jlpt180-books-app .ptt-book-feedback.is-error, .ptt-book-modal-status.is-error { color: #a51b3e; }
.ptt-book-overlay {
  position: fixed;
  z-index: 2147483600;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #1a0b2fb3;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
}
.ptt-book-modal {
  width: min(100%,490px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: clamp(18px,3vw,25px);
  border: 2px solid #a15fdb;
  border-radius: 22px;
  background: linear-gradient(150deg,#fff,#fcf3ff 90%);
  box-shadow: 0 20px 45px #170b3666;
  color: #312047;
}
.ptt-book-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ptt-book-modal h2 { margin: 0; color: #3c156f; font-size: 21px; font-weight: 900; line-height: 1.3; }
.ptt-book-modal .ptt-book-dismiss { background: #fff !important; color: #593385 !important; flex-shrink: 0; box-shadow: none; }
.ptt-book-modal .ptt-book-select { margin: 10px 0; }
.ptt-book-modal .ptt-book-primary { width: 100%; }
.ptt-book-inline-create { display: grid; grid-template-columns: minmax(0,1fr) 110px; gap: 8px; margin: 14px 0; }
.ptt-book-inline-create button { grid-column: 1 / -1; }
.ptt-book-library-link { display: block; margin-top: 12px; padding: 10px; min-height: 44px; text-align: center; color: #5e2a92; font-weight: 800; text-decoration: underline; }
@media (max-width: 760px) {
  #jlpt180-books-app .ptt-book-create { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #jlpt180-books-app .ptt-book-create label:nth-child(3) { grid-column: 1 / -1; }
  #jlpt180-books-app .ptt-book-grid, #jlpt180-books-app .ptt-book-word-grid { gap: 14px; }
  #jlpt180-books-app .ptt-book-tile { padding: 22px 19px 20px 30px; }
}
@media (max-width: 600px) {
  #jlpt180-books-app { width: calc(100vw - 16px); margin-top: 10px; }
  #jlpt180-books-app .ptt-book-panel { padding: 16px; border-radius: 18px !important; }
  #jlpt180-books-app :is(.ptt-book-create,.ptt-book-edit),
  #jlpt180-books-app :is(.ptt-book-grid,.ptt-book-word-grid) { grid-template-columns: minmax(0,1fr); }
  #jlpt180-books-app .ptt-book-create label:nth-child(3) { grid-column: auto; }
  #jlpt180-books-app :is(.ptt-book-create,.ptt-book-edit) { padding: 15px; gap: 12px; }
  #jlpt180-books-app .ptt-book-grid { margin: 18px 0; }
  #jlpt180-books-app .ptt-book-tile { min-height: 210px; }
  #jlpt180-books-app .ptt-book-owner-actions { flex-direction: column; }
  #jlpt180-books-app .ptt-book-owner-actions button { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  #jlpt180-books-app .ptt-book-tile { transition: transform .2s ease, box-shadow .2s ease; }
  #jlpt180-books-app .ptt-book-tile:hover { transform: translateY(-3px); }
}