:root { --brand: #F26B1D; --brand-deep: #C9500B; --ink: #1C1714; --tint: #FFF4EA; --line: #EADFD5; --side: #1C1714; }
body { font-family: "IBM Plex Sans Thai", system-ui, sans-serif; background: #F6F2EE; color: var(--ink); }
h1, h2, h3, .side-brand strong { font-family: "Anuphan", "IBM Plex Sans Thai", sans-serif; }
a { color: var(--brand-deep); }
.text-brand { color: var(--brand) !important; }
.btn-brand { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--brand-deep);
  --bs-btn-hover-border-color: var(--brand-deep); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--brand-deep); --bs-btn-active-color: #fff; font-weight: 500; }
:focus-visible { outline: 3px solid #FF9E2C; outline-offset: 2px; }

/* login */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: linear-gradient(160deg, #E2560A 0%, #F26B1D 50%, #FF9E2C 100%); }
.login-card { background: #fff; width: 100%; max-width: 400px; border-radius: 20px; padding: 2.25rem 2rem; text-align: center; box-shadow: 0 30px 60px -30px rgba(60,20,0,.6); border-bottom: 8px solid var(--ink); }
.login-card h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: .2rem; }
.login-card form { text-align: left; }

/* shell */
.admin-shell { display: flex; min-height: 100vh; }
.admin-side { width: 260px; background: var(--side) !important; color: #d8cbc0; flex: none; }
@media (min-width: 992px) { .admin-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.offcanvas-lg.admin-side { --bs-offcanvas-bg: var(--side); --bs-offcanvas-width: 270px; }
.side-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem; border-bottom: 4px solid var(--brand); }
.side-brand img { background: #fff; border-radius: 50%; padding: 4px 5px; }
.side-brand strong { display: block; color: #fff; font-size: .98rem; }
.side-brand small { display: block; font-size: .74rem; color: #bfae9f; line-height: 1.3; }
.side-menu { padding: .5rem .5rem 2rem; display: flex; flex-direction: column; }
.side-menu a { color: #e6dbd2; text-decoration: none; padding: .48rem .8rem; border-radius: 8px; font-size: .92rem; }
.side-menu a i { width: 1.4rem; display: inline-block; color: #FF9E2C; }
.side-menu a:hover { background: rgba(255,255,255,.07); color: #fff; }
.side-menu a.active { background: var(--brand); color: #fff; }
.side-menu a.active i { color: #fff; }
.side-group { margin: 1rem .8rem .25rem; font-size: .75rem; color: #9b8b7e; }
.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-top { display: flex; align-items: center; gap: .6rem; padding: .6rem 1.25rem; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.admin-content { padding: 1.5rem 1.25rem 4rem; max-width: 1400px; width: 100%; }
.page-top { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.page-top h1 { font-size: 1.45rem; font-weight: 700; margin: 0; }
.page-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem; margin-bottom: 1.25rem; }
.panel h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: .9rem; }
.panel.p-0 { overflow: hidden; }
.panel .table thead th { background: #FBF7F3; font-weight: 500; font-size: .85rem; color: #5b4f46; white-space: nowrap; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filter-bar .form-select, .filter-bar .form-control { width: auto; min-width: 200px; flex: 0 1 320px; }
.stat-card { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; text-decoration: none; color: var(--ink); }
.stat-card i { font-size: 1.6rem; width: 52px; height: 52px; display: grid; place-items: center; background: var(--tint); color: var(--brand-deep); border-radius: 12px; }
.stat-card strong { display: block; font-size: 1.5rem; font-family: "Anuphan", sans-serif; line-height: 1.1; }
.stat-card:hover { border-color: var(--brand); color: var(--ink); }
.mini-bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; }
.mini-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.mini-bars span { width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 3px; }
.mini-bars small { font-size: .7rem; color: #8a7b6f; }
.list-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--tint); }
.list-banner { width: 150px; height: 54px; object-fit: cover; border-radius: 6px; background: var(--tint); }
.list-avatar { width: 42px; height: 54px; object-fit: cover; border-radius: 6px; background: var(--tint); }
.current-file { display: flex; align-items: center; gap: .6rem; padding: .5rem; border: 1px dashed var(--line); border-radius: 10px; margin-bottom: .5rem; background: #FCFAF8; }
.current-file img { max-width: 120px; max-height: 70px; border-radius: 6px; object-fit: cover; }
.current-file > i { font-size: 1.6rem; }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.thumb { display: block; position: relative; cursor: pointer; }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.thumb span { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; padding: 1px 6px; border-radius: 6px; }
.drag-handle { cursor: grab; color: #a3958a; }
.sortable-ghost { background: var(--tint) !important; }
.sticky-save { position: sticky; bottom: 0; background: rgba(246,242,238,.95); padding: .8rem 0; border-top: 1px solid var(--line); }
.form-label { font-weight: 500; font-size: .92rem; }
.tox-tinymce { border-radius: 10px !important; }
@media (max-width: 575.98px) { .filter-bar .form-select, .filter-bar .form-control { min-width: 0; flex: 1 1 100%; } .admin-content { padding: 1rem .75rem 3rem; } }