:root {
--lorier-primary:    #1a4f8a;
--lorier-accent:     #e85d26;
--lorier-bg:         #f7f9fc;
--lorier-card-bg:    #ffffff;
--lorier-border:     #dce3ec;
--lorier-text:       #2d3a4a;
--lorier-muted:      #6b7a8d;
--lorier-radius:     10px;
--lorier-shadow:     0 2px 12px rgba(26,79,138,.08);
--lorier-shadow-h:   0 6px 24px rgba(26,79,138,.15);
}
.lorier-wrap { font-family: inherit; color: var(--lorier-text); } .lorier-filter-form { background: var(--lorier-bg); padding: 1.2rem 1.5rem; border-radius: var(--lorier-radius); border: 1px solid var(--lorier-border); margin-bottom: 1.5rem; }
.lorier-filter-row  { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.lorier-search-input,
.lorier-select,
.lorier-tag-input   { padding: .55rem .9rem; border: 1px solid var(--lorier-border); border-radius: 6px; font-size: .95rem; background: #fff; color: var(--lorier-text); flex: 1 1 160px; min-width: 140px; }
.lorier-search-input:focus,
.lorier-select:focus,
.lorier-tag-input:focus { outline: none; border-color: var(--lorier-primary); box-shadow: 0 0 0 3px rgba(26,79,138,.12); }
.lorier-count { font-size: .88rem; color: var(--lorier-muted); margin-bottom: 1.2rem; } .lorier-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.2rem; border-radius: 6px; font-size: .92rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: all .18s; text-decoration: none; }
.lorier-btn-primary { background: var(--lorier-primary); color: #fff; border-color: var(--lorier-primary); }
.lorier-btn-primary:hover { background: #133a6e; border-color: #133a6e; color: #fff; }
.lorier-btn-ghost   { background: transparent; color: var(--lorier-primary); border-color: var(--lorier-border); }
.lorier-btn-ghost:hover { background: var(--lorier-bg); }
.lorier-btn-outline { background: transparent; color: var(--lorier-primary); border-color: var(--lorier-primary); }
.lorier-btn-outline:hover { background: var(--lorier-primary); color: #fff; } .lorier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; margin-bottom: 2rem; } .lorier-card { background: var(--lorier-card-bg); border-radius: var(--lorier-radius); border: 1px solid var(--lorier-border); box-shadow: var(--lorier-shadow); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.lorier-card:hover { box-shadow: var(--lorier-shadow-h); transform: translateY(-3px); }
.lorier-card-thumb-link { display: block; position: relative; overflow: hidden; aspect-ratio: 16/9; }
.lorier-card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.lorier-card-thumb-link:hover .lorier-card-thumb { transform: scale(1.04); }
.lorier-no-thumb { background: linear-gradient(135deg, #1a4f8a 0%, #2d7dd2 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; height: 100%; }
.lorier-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,.55); color: #fff; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; opacity: 0; transition: opacity .2s; pointer-events: none; }
.lorier-card-thumb-link:hover .lorier-play-btn { opacity: 1; }
.lorier-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.lorier-card-themes { display: flex; flex-wrap: wrap; gap: .3rem; }
.lorier-card-title { font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.35; }
.lorier-card-title a { color: var(--lorier-text); text-decoration: none; }
.lorier-card-title a:hover { color: var(--lorier-primary); }
.lorier-card-date { font-size: .82rem; color: var(--lorier-muted); margin: 0; }
.lorier-card-comment { font-size: .88rem; color: var(--lorier-muted); margin: 0; line-height: 1.5; }
.lorier-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .4rem; } .lorier-badge { display: inline-block; padding: .2rem .6rem; border-radius: 20px; font-size: .75rem; font-weight: 600; text-decoration: none; transition: opacity .15s; }
.lorier-badge:hover { opacity: .8; }
.lorier-badge-theme   { background: #e8f0fb; color: var(--lorier-primary); }
.lorier-badge-tag     { background: #fdf0eb; color: var(--lorier-accent); }
.lorier-badge-warning { background: #fff3cd; color: #856404; }
.lorier-badge-info    { background: #cce5ff; color: #004085; }
.lorier-badge-success { background: #d4edda; color: #155724; } .lorier-pagination { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.lorier-page-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 6px; border: 1px solid var(--lorier-border); color: var(--lorier-primary); text-decoration: none; font-weight: 600; font-size: .9rem; transition: all .15s; }
.lorier-page-btn:hover, .lorier-page-btn.active { background: var(--lorier-primary); color: #fff; border-color: var(--lorier-primary); } .lorier-section-title { font-size: 1.4rem; font-weight: 700; color: var(--lorier-primary); margin: 0 0 .5rem; }
.lorier-section-intro { font-size: .95rem; color: var(--lorier-muted); margin-bottom: 1.5rem; line-height: 1.6; }
.lorier-empty { text-align: center; padding: 2rem; color: var(--lorier-muted); font-style: italic; } .lorier-proposal-box { background: var(--lorier-bg); border: 1px solid var(--lorier-border); border-radius: var(--lorier-radius); padding: 1.8rem 2rem; margin-bottom: 2.5rem; }
.lorier-history-box  { margin-bottom: 2rem; } .lorier-form { display: flex; flex-direction: column; gap: 1rem; }
.lorier-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lorier-form-group { display: flex; flex-direction: column; gap: .3rem; }
.lorier-form-group label { font-size: .88rem; font-weight: 600; color: var(--lorier-text); }
.lorier-form-group input,
.lorier-form-group textarea,
.lorier-form-group select { padding: .6rem .9rem; border: 1px solid var(--lorier-border); border-radius: 6px; font-size: .95rem; background: #fff; color: var(--lorier-text); transition: border .15s; font-family: inherit; resize: vertical; }
.lorier-form-group input:focus,
.lorier-form-group textarea:focus { outline: none; border-color: var(--lorier-primary); box-shadow: 0 0 0 3px rgba(26,79,138,.12); }
.lorier-form-actions { display: flex; gap: .8rem; } .lorier-msg { padding: .8rem 1rem; border-radius: 6px; font-size: .92rem; }
.lorier-msg.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.lorier-msg.error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .lorier-prop-list { display: flex; flex-direction: column; gap: 1rem; }
.lorier-prop-card { display: flex; gap: 1rem; align-items: flex-start; background: var(--lorier-card-bg); border: 1px solid var(--lorier-border); border-radius: var(--lorier-radius); padding: 1rem 1.2rem; box-shadow: var(--lorier-shadow); transition: box-shadow .2s; }
.lorier-prop-card:hover { box-shadow: var(--lorier-shadow-h); }
.lorier-prop-thumb { width: 100px; height: 70px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.lorier-prop-body  { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.lorier-prop-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.lorier-prop-title { font-size: .98rem; font-weight: 700; margin: 0; }
.lorier-prop-title a { color: var(--lorier-text); text-decoration: none; }
.lorier-prop-title a:hover { color: var(--lorier-primary); }
.lorier-prop-desc { font-size: .88rem; color: var(--lorier-muted); margin: 0; }
.lorier-prop-meta { font-size: .82rem; color: var(--lorier-muted); margin: 0; } .lorier-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.lorier-modal { background: #fff; border-radius: var(--lorier-radius); padding: 2rem; max-width: 560px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.lorier-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--lorier-muted); padding: .2rem .5rem; border-radius: 4px; }
.lorier-modal-close:hover { background: var(--lorier-bg); }
.lorier-modal-title    { font-size: 1.25rem; font-weight: 700; color: var(--lorier-primary); margin: 0 0 .4rem; }
.lorier-modal-subtitle { font-size: .9rem; color: var(--lorier-muted); margin: 0 0 1.2rem; } @media (max-width: 600px) {
.lorier-grid { grid-template-columns: 1fr; }
.lorier-form-row { grid-template-columns: 1fr; }
.lorier-prop-card { flex-direction: column; }
.lorier-prop-thumb { width: 100%; height: 160px; }
.lorier-proposal-box { padding: 1.2rem 1rem; }
.lorier-filter-row { flex-direction: column; }
.lorier-search-input, .lorier-select, .lorier-tag-input { min-width: 0; width: 100%; }
}