body { background-color: #2E3440; color: #D8DEE9; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
a { text-decoration: none; color: inherit; }
[x-cloak] { display: none !important; }
.sm\:container { max-width: 1540px !important; }
.font-serif { font-family: Georgia, 'Times New Roman', serif; }

.content-without-search { padding-top: 56px; }
.content-with-search    { padding-top: 116px; }

.aspect-16-9 { position: relative; padding-bottom: 56.25%; overflow: hidden; }
.aspect-16-9 > a { position: absolute; inset: 0; width: 100%; height: 100%; }
.aspect-16-9 img, .aspect-16-9 video { width: 100%; height: 100%; object-fit: cover; }
.thumbnail { cursor: pointer; }
.thumbnail img { transition: transform .3s ease; }
.thumbnail:hover img { transform: scale(1.05); }
.preview { object-fit: cover; }

.page-btn { display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:6px;background:#3B4252;color:#D8DEE9;font-size:13px;margin:0 2px; }
.page-btn:hover,.page-btn.active { background:#BF616A;color:#fff; }
.page-jump input { background:#3B4252;border:1px solid #4C566A;border-radius:6px;color:#D8DEE9;padding:4px 8px;width:64px;text-align:center;outline:none;font-size:13px; }
.page-jump button { background:#BF616A;color:#fff;border:none;border-radius:6px;padding:4px 12px;font-size:13px;cursor:pointer;margin-left:4px; }

.button-primary { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1.25rem; background: #BF616A; color: #fff; border-radius: .375rem; border: none; cursor: pointer; font-weight: 600; transition: background .2s; }
.button-primary:hover { background: #a8535b; }

.action-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; background: #3B4252; border: 1px solid #4C566A; border-radius: 6px; color: #D8DEE9; font-size: 13px; cursor: pointer; white-space: nowrap; }
.action-btn:hover { background: #434C5E; }
.tab-btn { padding: 8px 20px; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; color: #81A1C1; background: none; border-top: none; border-left: none; border-right: none; }
.tab-btn.active { color: #ECEFF4; border-bottom-color: #BF616A; }
.tab-btn:hover { color: #D8DEE9; }

.meta-tag { display:inline-block;margin:2px 4px 2px 0;padding:1px 8px;background:#3B4252;border:1px solid #4C566A;border-radius:3px;color:#BF616A;font-size:16px; }
.meta-tag:hover { border-color:#BF616A; }
.meta-link { display:inline-flex;align-items:center;gap:5px;margin:2px 6px 2px 0;color:#BF616A;font-size:16px; }
.meta-link:hover { text-decoration: underline; }
.meta-pill { display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#3B4252;border:1px solid #4C566A;border-radius:20px;color:#D8DEE9;font-size:16px; }
.meta-pill:hover { border-color:#BF616A;color:#BF616A; }
.clamp-3 { overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; }

.page-content { max-width: 800px; margin: 0 auto; }
.page-content p { margin-bottom: 1em; line-height: 1.8; color: #D8DEE9; text-align: justify; }
.page-content a { color: #BF616A; text-decoration: underline; }
.page-content h2 { font-size: 20px; font-weight: bold; margin: 1.5em 0 0.8em; color: #ECEFF4; border-left: 4px solid #BF616A; padding-left: 12px; }
.page-content ul { margin-bottom: 1.5em; padding-left: 1.2em; }
.page-content li { margin-bottom: 0.8em; line-height: 1.8; list-style: disc; color: #D8DEE9; }
.page-content hr { border: 0; border-top: 1px solid #4C566A; margin: 2rem 0; }
.highlight { color: #BF616A; font-weight: bold; }

.form-input { width:100%; background:#2E3440; border:1px solid #4C566A; border-radius:6px; color:#ECEFF4; padding:.6rem .8rem; outline:none; }
.form-input:focus { border-color:#81A1C1; }
.form-label { display:block; font-size:.85rem; color:#81A1C1; margin-bottom:.35rem; }
.alert-error { background:#5c2b30; color:#f3d0d3; border-radius:6px; padding:.6rem .9rem; font-size:.9rem; }
.alert-ok { background:#2f4a33; color:#d4ecd6; border-radius:6px; padding:.6rem .9rem; font-size:.9rem; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #2E3440; }
::-webkit-scrollbar-thumb { background: #4C566A; border-radius: 3px; }