*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ===== Theme system: blue (default) / red / green / white ===== Themes are applied as a class on and persisted in localStorage. Colors are driven entirely by CSS variables so every component adapts. */ :root, html.blue { --bg-1: #061229; --bg-2: #0b2b4a; --surface: #0b2b4a; --card-bg: #12365c; --card-border: rgba(255, 255, 255, 0.06); --card-hover-border: rgba(47, 161, 255, 0.45); --accent: #2fa1ff; --accent-strong: #2563eb; --danger: #ff6b6b; --danger-strong: #dc2626; --fg: #d9eefc; --fg-muted: rgba(217, 238, 252, 0.6); --field-bg: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.12); --radius: 10px; } html.red { --bg-1: #501212; --bg-2: #7d2a2a; --surface: #7d2a2a; --card-bg: #8f3232; --card-border: rgba(255, 255, 255, 0.06); --card-hover-border: rgba(255, 170, 170, 0.55); --accent: #ffaaaa; --accent-strong: #d94a4a; --danger: #ffd0d0; --danger-strong: #b91c1c; --fg: #ffffff; --fg-muted: rgba(255, 255, 255, 0.6); --field-bg: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.14); } html.green { --bg-1: #0b3a14; --bg-2: #1e5f2e; --surface: #1e5f2e; --card-bg: #256b37; --card-border: rgba(255, 255, 255, 0.06); --card-hover-border: rgba(170, 255, 170, 0.55); --accent: #aaffaa; --accent-strong: #2f9e44; --danger: #ffd0d0; --danger-strong: #c92a2a; --fg: #ffffff; --fg-muted: rgba(255, 255, 255, 0.6); --field-bg: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.14); } html.white { --bg-1: #eceff1; --bg-2: #f5f5f5; --surface: #ffffff; --card-bg: #ffffff; --card-border: rgba(0, 0, 0, 0.08); --card-hover-border: rgba(6, 69, 173, 0.35); --accent: #0645ad; --accent-strong: #0645ad; --danger: #dc2626; --danger-strong: #b91c1c; --fg: #1a1a1a; --fg-muted: rgba(0, 0, 0, 0.55); --field-bg: #ffffff; --border: #cccccc; --radius: 10px; } html, body { min-height: 100dvh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; color: var(--fg); background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%); background-attachment: fixed; line-height: 1.5; transition: background .3s ease, color .3s ease; } /* ===== Nav ===== */ nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--card-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html.white nav { background: rgba(255, 255, 255, 0.85); } .nav-brand { font-size: 18px; font-weight: 700; text-decoration: none; color: var(--fg); } .nav-right { display: flex; align-items: center; gap: 12px; } .theme-btn { background: var(--field-bg); color: var(--fg); padding: 7px 14px; border: 1px solid var(--card-hover-border); border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .theme-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.12); } html.white .theme-btn:hover { background: rgba(0, 0, 0, 0.05); } main { max-width: 860px; margin: 32px auto; padding: 0 16px; } h1 { font-size: 22px; font-weight: 600; margin-bottom: 16px; color: var(--fg); } /* ===== Buttons ===== */ .btn { display: inline-block; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--field-bg); color: var(--fg); text-decoration: none; font-size: 14px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, filter .2s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .btn-primary { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); } .btn-primary:hover { filter: brightness(1.08); } .btn-danger { background: var(--danger-strong); color: #fff; border-color: var(--danger-strong); } .btn-danger:hover { filter: brightness(1.08); } .btn-link { background: none; border: none; padding: 0; color: var(--danger); cursor: pointer; font-size: 14px; transform: none; } .btn-link:hover { text-decoration: underline; transform: none; box-shadow: none; } /* ===== List page ===== */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .page-header h1 { margin-bottom: 0; } .search-form { display: flex; gap: 8px; align-items: center; } .search-form input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; width: 240px; background: var(--field-bg); color: var(--fg); } .search-form input::placeholder { color: var(--fg-muted); } .search-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 161, 255, 0.18); } .search-form button { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--card-hover-border); background: var(--field-bg); color: var(--fg); cursor: pointer; font-weight: 600; } .search-form button:hover { background: rgba(255, 255, 255, 0.12); } html.white .search-form button:hover { background: rgba(0, 0, 0, 0.05); } .search-form a { font-size: 13px; color: var(--fg-muted); } table { width: 100%; border-collapse: collapse; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } th { text-align: left; padding: 11px 14px; background: rgba(255, 255, 255, 0.05); font-size: 13px; color: var(--fg-muted); border-bottom: 1px solid var(--card-border); } html.white th { background: #f0f0f0; } td { padding: 11px 14px; border-bottom: 1px solid var(--card-border); } tr:last-child td { border-bottom: none; } tbody tr { transition: background .2s ease; } tbody tr:hover { background: rgba(255, 255, 255, 0.05); } html.white tbody tr:hover { background: #f7fbff; } td a { color: var(--accent); text-decoration: none; } td a:hover { text-decoration: underline; } .actions { display: flex; gap: 10px; align-items: center; } .inline-form { display: inline; } .empty { color: var(--fg-muted); margin-top: 24px; } .empty a { color: var(--accent); } /* ===== Detail page ===== */ .detail { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 28px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 16px; } .detail-header h1 { margin-bottom: 0; } dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; margin-bottom: 24px; } dt { font-weight: 600; color: var(--fg-muted); font-size: 13px; padding-top: 2px; } dd { color: var(--fg); } .notes { white-space: pre-wrap; } .detail > a { color: var(--accent); text-decoration: none; } .detail > a:hover { text-decoration: underline; } /* ===== Form page ===== */ .form-page { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 28px; max-width: 520px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .form-page h1 { margin-bottom: 20px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--fg-muted); margin-bottom: 5px; } .field input, .field textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--field-bg); color: var(--fg); } .field input::placeholder, .field textarea::placeholder { color: var(--fg-muted); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 161, 255, 0.18); } .field.error input, .field.error textarea { border-color: var(--danger); } .error-msg { display: block; color: var(--danger); font-size: 12px; margin-top: 4px; } .optional { font-weight: 400; color: var(--fg-muted); } .form-actions { display: flex; gap: 12px; align-items: center; margin-top: 20px; } .form-actions a { color: var(--fg-muted); text-decoration: none; } .form-actions a:hover { text-decoration: underline; } /* ===== Book search page ===== */ .form-lead { color: var(--fg-muted); font-size: 14px; margin-bottom: 20px; } .form-lead a { color: var(--accent); text-decoration: none; } .form-lead a:hover { text-decoration: underline; } .search-hint { color: var(--fg-muted); font-size: 14px; margin-bottom: 14px; } .results-table td, .results-table th { vertical-align: middle; } .results-table .col-select { width: 44px; text-align: center; } .results-table input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent-strong); } .muted { color: var(--fg-muted); font-style: italic; font-size: 13px; } /* ===== Sortable column headers ===== */ .sort-link { color: var(--fg-muted); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .sort-link:hover { color: var(--fg); } .sort-link.active { color: var(--accent); }