:root{
  --hue:200;
  --radius:10px;
  --gap:1rem;
  --shadow:0 6px 16px rgba(0,0,0,.08);
  --font:"Inter","PingFang SC","Microsoft YaHei",sans-serif;

  /* Light */
  --bg:#f7f9fc;
  --card:#fff;
  --text:#333;
  --sub:#666;
  --border:#e3e7ee;
  --primary:hsl(var(--hue) 90% 55%);
  --primary-hov:hsl(var(--hue) 90% 46%);
  --warn:#e84855;
}
/* Dark */
html[data-theme="dark"]{
  --bg:#1e1f24;
  --card:#282a30;
  --text:#e5e7eb;
  --sub:#9ca3af;
  --border:#3a3c43;
  --shadow:0 6px 16px rgba(0,0,0,.5);
}

/* —— 全站字体整体缩小 20% —— */
html{font-size:80%;}

*,::before,::after{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  display:flex;flex-direction:column;min-height:100vh;
  font-family:var(--font);background:var(--bg);color:var(--text);
  line-height: 1.5; /* Added for better spacing */
}
a{color:var(--primary);text-decoration:none;}
h1,h2{margin:.5rem 0 1rem;font-weight:600;line-height:1.25}
h2{font-size: 1.3rem;} /* Slightly larger h2 */

/* ---------- App Bar ---------- */
.app-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:.8rem 1.2rem;border-bottom:1px solid var(--border);
  background-color: var(--card); /* Give app bar a background */
  box-shadow: var(--shadow); /* Add shadow */
  position: sticky; /* Make header sticky */
  top: 0;
  z-index: 10;
  backdrop-filter:blur(8px); /* Keep blur effect */
}
.app-bar h1 {
  margin: 0; /* Remove default margin */
  font-size: 1.5rem; /* Adjust size */
}
.icon-btn{background:none;border:none;font-size:1.3rem;color:var(--text);cursor:pointer;padding:.3em;}
.icon-btn:hover{color:var(--primary);}

/* ---------- Grid ---------- */
.content-grid{
  flex:1;display:grid;gap:var(--gap);padding:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); /* Slightly wider min width */
}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.2rem;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
/* Make results span full width on smaller screens if possible */
@media (min-width: 768px) {
  .span-2{
    grid-column: span 2; /* Span 2 columns */
  }
  .content-grid {
     /* Ensure 2 columns on wider screens */
     grid-template-columns: 1fr 2fr;
  }
}
@media (min-width: 1024px) {
    .content-grid {
        /* Allow more flexible sizing on very wide screens */
        grid-template-columns: minmax(360px, 1fr) 2fr;
    }
}


/* ---------- Image Scanner / Capture ---------- */
.image-info-box {
  position: relative;
  min-height: 50px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1rem;
  margin-bottom: var(--gap);
  text-align: center;
}
.feedback{
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.4;
}
.feedback small {
  font-size: 0.85em; /* Make small text slightly smaller */
}

.btn-group{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto;}
.btn-group.right{justify-content:flex-end;}

button,.file-label{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1.2rem; /* Slightly larger padding */
  font:inherit;font-size: 0.95rem; /* Ensure consistent font size */
  border:none;border-radius:var(--radius);
  cursor:pointer;user-select:none;transition:.2s;background:var(--primary);color:#fff;
  text-align: center; /* Center text */
}
button i, .file-label i {
  font-size: 1em; /* Match icon size to text */
  line-height: 1; /* Prevent extra spacing */
}
button:hover:not(:disabled),.file-label:hover{background:var(--primary-hov); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.1);}
button:disabled, .file-label[disabled] { /* Style disabled file label */
    opacity:.4;
    cursor:not-allowed;
    background: var(--sub); /* Grey background for disabled */
}
button:disabled:hover, .file-label[disabled]:hover { /* Prevent hover effects on disabled */
    transform: none;
    box-shadow: none;
    background: var(--sub);
}

.warn{background:var(--warn);}
.warn:hover:not(:disabled){background:#ce3742;}
/* Ensure file label looks like a button */
.file-label{background:var(--primary);}
.file-label[for="importCsvInput"] { background: hsl(var(--hue), 15%, 50%); } /* Different color for import */
.file-label[for="importCsvInput"]:hover { background: hsl(var(--hue), 15%, 40%); }


/* ---------- Inputs & 数量加减 ---------- */

/* Shared input styles */
.title-input, .isbn-input, .count-input {
  padding: 4px 6px; /* Consistent padding */
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 0.6); /* Slightly smaller radius */
  background: var(--card);
  color: var(--text);
  font: inherit; /* Use body font settings */
  transition: border-color 0.2s, box-shadow 0.2s;
}
.title-input:focus, .isbn-input:focus, .count-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px hsla(var(--hue), 90%, 55%, 0.2); /* Focus ring */
}
.title-input:disabled, .isbn-input:disabled, .count-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--bg); /* Indicate disabled state */
}

/* Title Input Specifics */
.title-input{
  width:100%;
  font-weight:600;
  font-size:1rem; /* Larger title font */
  border: none; /* Make title borderless by default */
  background: transparent; /* Transparent background */
  padding: 2px 0; /* Minimal padding */
  border-radius: 0;
  box-shadow: none; /* No shadow */
}
.title-input:focus {
  outline: none; /* Remove default outline */
  background: var(--bg); /* Slight background on focus */
  border: none;
  box-shadow: none;
}
.title-input.loading,
.title-input.error {
  opacity: 0.7;
  font-style: italic;
}
.title-input.error::placeholder {
  color: var(--warn);
  opacity: 0.8;
}

/* ISBN Input Specifics (NEW) */
.isbn-input {
  width: 100%; /* Take available width */
  font-size:.85rem;
  color:var(--sub);
  margin-top: 0.1rem; /* Space below title */
  border: none; /* Borderless by default */
  background: transparent;
  padding: 2px 0;
  border-radius: 0;
  box-shadow: none;
}
.isbn-input:focus {
  background: var(--bg);
  border: none;
  box-shadow: none;
  color: var(--text); /* Darker text on focus */
}
/* Optional: Style when disabled (e.g., during fetch) */
.isbn-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: transparent; /* Keep transparent bg when disabled */
    /* font-style: italic; */
}


/* Quantity Box */
.qty-box{display:inline-flex;align-items:center;gap:.35rem;}
.qty-btn{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:1rem;line-height:1;padding:.35rem .6rem;
  cursor:pointer;user-select:none;transition:.2s;color:var(--text);
  width: 28px; /* Fixed width */
  height: 28px; /* Fixed height */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.qty-btn:hover:not(:disabled){
  background:var(--primary);color:#fff;border-color:var(--primary);
}
.qty-btn:disabled{opacity:.5;cursor:not-allowed; background: var(--bg);}

.count-input{
  width:4rem; /* Slightly wider */
  text-align:center;
  height: 28px; /* Match button height */
  padding: .25rem .4rem; /* Adjust padding */
}
/* Hide spinner buttons on number input */
.count-input::-webkit-outer-spin-button,
.count-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.count-input {
  -moz-appearance: textfield; /* Firefox */
  appearance: none; /* Standard */
}


/* ---------- Single Item Delete Button ---------- */
.del-btn{
  background:none;border:none;color:var(--sub);cursor:pointer;
  font-size:1.1rem;line-height:1;transition: color .2s; margin-left: auto; /* Push to the right */
  padding: 0.4rem 0.6rem; /* Increase clickable area */
  border-radius: 50%; /* Make it round */
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.del-btn:hover{color:var(--warn); background-color: hsla(var(--warn), 100%, 50%, 0.1);} /* Subtle background on hover */

/* ---------- List ---------- */
#bookList{
  list-style:none;margin:1rem 0;padding:0;max-height:40vh; /* Use viewport height */
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background-color: var(--card); /* Ensure background */
}
#bookList li{
  display:flex;align-items:center;gap:.8rem; /* Adjust gap */
  padding:.8rem 1rem; /* Adjust padding */
  border-bottom:1px solid var(--border);
  transition: background-color 0.2s; /* Smooth hover */
}
#bookList li:hover {
    background-color: var(--bg); /* Subtle hover effect */
}
#bookList li:last-child{border-bottom:none;}

/* Layout within list item */
.book-info{
    flex: 1; /* Take remaining space */
    min-width: 0; /* Allow shrinking */
    display: flex;
    flex-direction: column; /* Stack title and ISBN */
    margin-right: 0.5rem; /* Space before qty box */
}
/* Adjust spacing between list item elements */
#bookList li > .qty-box { margin-left: auto; margin-right: 0.5rem; } /* Push qty box left, add space before delete */


/* ---------- Misc ---------- */
.stat-line{font-size:.95rem;margin-top:.2rem;color:var(--sub);}
.footer{font-size:.8rem;color:var(--sub);text-align:center;padding:1.5rem 0 1rem;}


/* ---------- Scrollbar ---------- */
:where(#bookList)::-webkit-scrollbar{width:8px;}
:where(#bookList)::-webkit-scrollbar-track { background: transparent; }
:where(#bookList)::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
:where(#bookList)::-webkit-scrollbar-thumb:hover{background:var(--sub);}
/* Firefox Scrollbar */
:where(#bookList) { scrollbar-width: thin; scrollbar-color: var(--border) transparent;}

/* Make sure loading/error states don't override manual edits easily */
.title-input:not(:disabled):focus,
.isbn-input:not(:disabled):focus {
    opacity: 1;
    font-style: normal; /* Ensure focus removes italic style */
}