新增书籍表、列表/搜索、管理员/馆员维护入口

src/main/webapp/static/css/app.css

@@ -8,6 +8,8 @@
     --color-primary: #256f6c;
     --color-primary-strong: #1b5654;
     --color-accent: #b54238;
+    --color-success: #2f6f3e;
+    --color-warning: #8a5a00;
     --shadow-panel: 0 18px 45px rgba(28, 39, 49, 0.12);
 }
 
@@ -91,7 +93,10 @@ a {
 .login-panel,
 .notice-panel,
 .dashboard-hero,
-.workspace-card {
+.workspace-card,
+.toolbar-panel,
+.table-panel,
+.form-panel {
     border: 1px solid var(--color-border);
     border-radius: 8px;
     background: var(--color-panel);
@@ -184,6 +189,15 @@ h2 {
     background: #ffffff;
 }
 
+.button-danger {
+    color: #ffffff;
+    background: var(--color-accent);
+}
+
+.button-danger:hover {
+    background: #8f3028;
+}
+
 .message {
     margin-bottom: 16px;
     padding: 10px 12px;
@@ -197,6 +211,12 @@ h2 {
     background: #fff0ee;
 }
 
+.message-success {
+    color: #1f572e;
+    border: 1px solid rgba(47, 111, 62, 0.3);
+    background: #effaf1;
+}
+
 .page-shell {
     padding: 36px 0 56px;
 }
@@ -239,6 +259,173 @@ h2 {
     padding: 28px;
 }
 
+.role-actions {
+    margin-top: 24px;
+}
+
+.catalog-hero {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 18px;
+    flex-wrap: wrap;
+}
+
+.catalog-hero .button {
+    margin-top: 0;
+}
+
+.toolbar-panel,
+.table-panel,
+.form-panel {
+    padding: 24px;
+    margin-bottom: 24px;
+}
+
+.search-form {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(120px, 1fr)) auto auto auto;
+    gap: 10px;
+    align-items: end;
+}
+
+.search-field {
+    display: grid;
+    gap: 6px;
+}
+
+.search-form label {
+    color: var(--color-muted);
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.search-form input,
+.search-form select,
+.book-form input,
+.book-form select {
+    width: 100%;
+    min-height: 42px;
+    padding: 9px 11px;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    background: #ffffff;
+    font: inherit;
+}
+
+.search-form input:focus,
+.search-form select:focus,
+.book-form input:focus,
+.book-form select:focus {
+    outline: 3px solid rgba(37, 111, 108, 0.18);
+    border-color: var(--color-primary);
+}
+
+.table-scroll {
+    width: 100%;
+    overflow-x: auto;
+}
+
+.data-table {
+    width: 100%;
+    min-width: 760px;
+    border-collapse: collapse;
+    font-size: 14px;
+}
+
+.data-table th,
+.data-table td {
+    padding: 12px 10px;
+    text-align: left;
+    border-bottom: 1px solid var(--color-border);
+    vertical-align: middle;
+}
+
+.data-table th {
+    color: var(--color-muted);
+    font-size: 13px;
+    font-weight: 700;
+    background: #f8fafc;
+}
+
+.empty-state {
+    margin-bottom: 0;
+    color: var(--color-muted);
+}
+
+.status-pill {
+    display: inline-flex;
+    min-height: 28px;
+    align-items: center;
+    padding: 4px 9px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 700;
+}
+
+.status-available {
+    color: var(--color-success);
+    background: #edf8ef;
+}
+
+.status-unavailable {
+    color: var(--color-warning);
+    background: #fff7e5;
+}
+
+.status-archived {
+    color: var(--color-muted);
+    background: #eef1f5;
+}
+
+.table-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.table-actions form {
+    margin: 0;
+}
+
+.form-panel {
+    max-width: 860px;
+}
+
+.book-form {
+    display: grid;
+    gap: 20px;
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+}
+
+.form-field {
+    display: grid;
+    gap: 6px;
+}
+
+.form-field label {
+    color: var(--color-muted);
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.field-error {
+    color: #7a211a;
+    font-size: 13px;
+}
+
+.form-actions {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
 @media (max-width: 720px) {
     .app-header {
         align-items: flex-start;
@@ -257,7 +444,15 @@ h2 {
     .login-panel,
     .notice-panel,
     .dashboard-hero,
-    .workspace-card {
+    .workspace-card,
+    .toolbar-panel,
+    .table-panel,
+    .form-panel {
         box-shadow: none;
     }
+
+    .search-form,
+    .form-grid {
+        grid-template-columns: 1fr;
+    }
 }