:root {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --ink: #333333;
  --muted: #666666;
  --accent: #e4002b;
  --card: #ffffff;
  --card2: #ffffff;
  --border: #e0e0e0;
  --shadow: 0 8px 30px rgba(17, 24, 39, 0.07);
  --color-primary: #0b0e13;
  --color-accent: #e4002b;
  --color-bg: #f7f8fb;
  --color-card-bg: #ffffff;
  --color-text: #333333;
  --color-muted: #666666;
  --color-border: #e0e0e0;
  --color-header-bg: #ffffff;
  --color-header-text: #333333;
  --color-footer-bg: #f0f0f0;
  --color-footer-text: #666666;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--site-font, Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif);
  background: var(--bg);
  color: var(--ink);
}

a {
  color: inherit;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px;
}

.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.site-footer {
  background: var(--panel);
  border-top: 1px solid var(--border);
  margin-top: 24px;
}

.brand {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-decoration: none;
  color: var(--ink);
}

.brand .xx {
  color: var(--accent);
  margin-left: 1px;
}

.header-search {
  flex: 1;
  max-width: 520px;
  position: relative;
}

.searchbar input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
  outline: none;
}
.searchbar input:focus {
  border-color: var(--accent);
}
.searchbar input:invalid {
  box-shadow: none;
}

.facets {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.facets-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 8px 0;
}

.facets-bar:empty {
  display: none;
}

.facets-bar > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.facets-bar label {
  font-size: 11px;
  color: var(--muted);
}

.facets-bar select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
  min-width: 140px;
}

.facets select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.card .pic {
  aspect-ratio: 16/10;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card .pic img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.card .body {
  padding: 14px 14px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card h3 {
  margin: 0 0 6px;
  font: 700 16px/1.2 var(--site-font);
}

.card p {
  margin: 0;
  color: var(--muted);
  font: 400 13px/1.5 var(--site-font);
  flex: 1;
}

.card .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 10px 14px 14px;
}

.card .card-hit {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card .card-hit:hover h3 {
  text-decoration: underline;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  text-decoration: none;
}

.btn.primary {
  background: #0b0e13;
  color: #fff;
  border-color: #0b0e13;
}

.btn.small {
  padding: 6px 8px;
  font-size: 13px;
}

.pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 18px 0;
}

.pager button {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
}

.backlink {
  display: inline-block;
  margin: 12px 0 14px;
  text-decoration: none;
  color: var(--muted);
}

.detail-head {
  display: none;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.detail-head h1 {
  margin: 0;
  font: 800 22px/1.2 var(--site-font);
}

.canvas-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
}

.page {
  position: relative;
  background: #fff;
  color: #111;
  box-shadow: none;
  transform: none !important;
}

.page.a4hoch { width: 794px; height: 1123px; }
.page.a4quer { width: 1123px; height: 794px; }
.page.a5hoch { width: 560px; height: 794px; }
.page.a5quer { width: 794px; height: 560px; }

.page-inner {
  position: absolute;
  inset: var(--marg, 24px);
  outline: none;
}

.el {
  position: absolute;
}

.el-body {
  width: 100%;
  height: 100%;
  background: #fff;
}

.el-body img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* Shell: custom */

/* Shell Base */
.skip-link{position:absolute;top:-40px;left:0;background:var(--color-accent);color:#fff;padding:8px 16px;z-index:100;transition:top .3s}
.skip-link:focus{top:0}
.site-header{background:var(--color-header-bg);color:var(--color-header-text);position:sticky;top:0;z-index:50;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.header-inner{max-width:1400px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px}
.site-logo{display:flex;align-items:center;text-decoration:none;color:inherit}
.site-logo img{height:40px;width:auto}
.site-title{font-size:18px;font-weight:600}
.site-nav{display:flex;gap:24px;margin-left:auto}
.site-nav a{color:inherit;text-decoration:none;font-size:14px;transition:opacity .2s}
.site-nav a:hover{opacity:.7}
.header-search{margin-left:20px}
.header-search input{padding:8px 12px;border:1px solid var(--color-border);border-radius:8px;font-size:14px;width:200px}
.site-main{max-width:1400px;margin:0 auto;padding:24px 20px;min-height:60vh}
.site-footer{background:var(--color-footer-bg);color:var(--color-footer-text);margin-top:auto}
.footer-inner{max-width:1400px;margin:0 auto;padding:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-links{display:flex;gap:20px}
.footer-links a{color:inherit;text-decoration:none;font-size:14px}
.footer-links a:hover{text-decoration:underline}
.footer-copyright{font-size:13px;opacity:.8}

/* Layout: List View */
.list-view{display:flex;flex-direction:column;gap:16px}
.list-item{display:flex;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;transition:box-shadow .2s}
.list-item:hover{box-shadow:var(--shadow)}
.list-item-image{width:120px;height:80px;flex-shrink:0;border-radius:8px;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center}
.list-item-image img{width:100%;height:100%;object-fit:cover}
.list-item-image .no-image{font-size:32px;opacity:.3}
.list-item-content{flex:1;min-width:0}
.list-item-content h3{margin:0 0 8px;font-size:16px}
.list-item-content h3 a{color:inherit;text-decoration:none}
.list-item-content h3 a:hover{text-decoration:underline}
.list-item-content p{margin:0;font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list-item-actions{display:flex;flex-direction:column;gap:8px;justify-content:center}

/* Layout: Table View */
.table-view{width:100%}
.data-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.data-table thead{background:var(--bg)}
.data-table th{padding:12px 16px;text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:1px solid var(--border)}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover{background:rgba(0,0,0,.02)}
.table-cell-image{width:60px}
.table-thumb{width:50px;height:35px;object-fit:cover;border-radius:4px}
.table-cell-title{font-weight:500}
.table-cell-title a{color:inherit;text-decoration:none}
.table-cell-title a:hover{text-decoration:underline;color:var(--accent)}
.table-cell-summary{color:var(--muted);font-size:13px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-cell-actions{white-space:nowrap}

/* Responsive Layout */
@media(max-width:768px){
  .list-item{flex-direction:column}
  .list-item-image{width:100%;height:150px}
  .list-item-actions{flex-direction:row}
  .data-table{font-size:13px}
  .table-cell-summary{display:none}
  .table-thumb{width:40px;height:28px}
}