body { font-family: 'Noto Sans Lao', 'Noto Sans Thai', system-ui, sans-serif; background: #f2f4f3; }
.adm-wrap { display: flex; min-height: 100vh; }
.adm-side { width: 240px; background: #16251d !important; color: #cfd8d3; flex: none; }
@media (min-width: 992px) { .adm-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.adm-side.offcanvas-lg { --bs-offcanvas-bg: #16251d; --bs-offcanvas-width: 260px; }
.adm-brand { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.1rem; font-weight: 600; color: #fff; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.adm-brand i { color: #f0b429; font-size: 1.4rem; }
.adm-side .nav { padding: .5rem; width: 100%; }
.adm-side .nav-link { color: #cfd8d3; border-radius: 8px; display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; }
.adm-side .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.adm-side .nav-link.active { background: #1f5f3f; color: #fff; }
.adm-side hr { border-color: rgba(255,255,255,.15); }
.adm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-top { display: flex; align-items: center; gap: .75rem; background: #fff; padding: .6rem 1.25rem; border-bottom: 1px solid #e3e7e5; position: sticky; top: 0; z-index: 10; }
.adm-content { padding: 1.25rem; }
.stat-card { border: 0; border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.stat-card .icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.stat-card .num { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.card { border-radius: 12px; }
.table td, .table th { vertical-align: middle; }
.thumb-sm { width: 40px; height: 56px; object-fit: cover; border-radius: 3px; box-shadow: 1px 2px 4px rgba(0,0,0,.2); }
.cover-preview { width: 150px; aspect-ratio: 3/4.2; object-fit: cover; border-radius: 4px; box-shadow: 2px 4px 10px rgba(0,0,0,.25); background: #ddd; }
.page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; max-height: 320px; overflow: auto; }
.page-grid figure { margin: 0; text-align: center; font-size: 11px; color: #666; }
.page-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border: 1px solid #ddd; border-radius: 3px; }
.adm-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #143f2a, #2f7d55); }
.format-pane { display: none; }
.format-pane.show { display: block; }

/* ---------- Drive ---------- */
.drive { display: flex; gap: 1rem; min-height: calc(100vh - 110px); }
.drive-side { width: 230px; flex: none; }
.drive-new { border-radius: 16px; padding: .7rem 1.1rem; }
.drive-nav .nav-link { color: #333; border-radius: 0 20px 20px 0; padding: .45rem .9rem; display: flex; gap: .6rem; align-items: center; }
.drive-nav .nav-link:hover { background: #e8ece9; }
.drive-nav .nav-link.active { background: #d3e8dc; color: #143f2a; font-weight: 600; }
.drive-main { flex: 1; min-width: 0; background: #fff; border-radius: 16px; padding: .75rem 1rem 1rem; position: relative; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.drive-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.drive-search { flex: 1; max-width: 640px; display: flex; align-items: center; gap: .5rem; background: #eef1ef; border-radius: 24px; padding: .45rem 1rem; }
.drive-search input { border: 0; background: transparent; outline: none; flex: 1; }
.drive-head { display: flex; align-items: center; gap: .5rem; min-height: 44px; border-bottom: 1px solid #eee; margin-bottom: .75rem; flex-wrap: wrap; }
.drive-crumbs { display: flex; align-items: center; flex-wrap: wrap; font-size: 1.15rem; }
.drive-crumbs a { color: #333; text-decoration: none; padding: .2rem .5rem; border-radius: 8px; }
.drive-crumbs a:hover { background: #eef1ef; }
.drive-crumbs a:last-child { font-weight: 600; }
.drive-crumbs .sep { color: #999; font-size: .9rem; }
.drive-selbar { display: flex; align-items: center; gap: .25rem; background: #e8f0fe; border-radius: 20px; padding: .2rem .6rem; }
.drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.drive-sec { font-size: .85rem; color: #666; font-weight: 600; margin: .5rem 0; }
.d-card { position: relative; border: 1px solid #e3e6e4; border-radius: 12px; background: #f7f8f7; cursor: pointer; user-select: none; overflow: hidden; transition: background .1s, box-shadow .1s; }
.d-card:hover { background: #eef1ef; }
.d-card.sel { background: #d3e8dc; border-color: #1f5f3f; }
.d-card.drop { box-shadow: 0 0 0 3px #1f5f3f inset; }
.d-card .d-thumb { height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; margin: 0 8px 8px; border-radius: 8px; overflow: hidden; }
.d-card .d-thumb img { width: 100%; height: 100%; object-fit: cover; }
.d-card .d-thumb i { font-size: 3.2rem; }
.d-card .d-name { display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; font-size: .9rem; }
.d-card .d-name span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-card.folder .d-thumb { display: none; }
.d-card .d-star { color: #f0b429; }
.d-card .d-note { font-size: .75rem; color: #777; padding: 0 .7rem .5rem; margin-top: -.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-list { width: 100%; }
.d-list th { font-weight: 600; color: #555; font-size: .85rem; border-bottom: 1px solid #eee; padding: .4rem; }
.d-list td { padding: .45rem .4rem; border-bottom: 1px solid #f1f1f1; font-size: .9rem; vertical-align: middle; }
.d-list tr.d-row { cursor: pointer; user-select: none; }
.d-list tr.d-row:hover td { background: #f3f5f4; }
.d-list tr.d-row.sel td { background: #d3e8dc; }
.d-list tr.d-row.drop td { box-shadow: inset 0 0 0 2px #1f5f3f; }
.d-list .d-n { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.d-list .d-n span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-ico { font-size: 1.25rem; flex: none; }
.k-folder { color: #5f6368; } .k-library { color: #1f5f3f; } .k-sysfolder { color: #8a5a2b; }
.k-image { color: #d93025; } .k-pdf { color: #ea4335; } .k-video { color: #d93025; } .k-audio { color: #e37400; }
.k-doc { color: #1a73e8; } .k-sheet { color: #188038; } .k-slide { color: #f9ab00; } .k-archive { color: #5f6368; } .k-text, .k-file { color: #5f6368; }
.drive-empty { text-align: center; color: #888; padding: 4rem 1rem; }
.drive-empty i { font-size: 4rem; color: #c5cbc7; }
.drive-drop-hint { display: none; position: absolute; inset: 0; border: 3px dashed #1f5f3f; border-radius: 16px; background: rgba(211,232,220,.85); z-index: 5; align-items: center; justify-content: center; flex-direction: column; font-size: 1.2rem; color: #143f2a; }
.drive-drop-hint i { font-size: 3rem; }
.drive-main.dragging .drive-drop-hint { display: flex; }
.drive-ctx { position: fixed; display: none; z-index: 2000; }
.drive-ctx.show { display: block; }
.drive-uploads { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 360px; max-width: 92vw; background: #fff; border-radius: 12px; overflow: hidden; z-index: 1500; }
.drive-uploads-head { background: #1d2a23; color: #fff; padding: .5rem .75rem; display: flex; align-items: center; justify-content: space-between; }
.drive-uploads-list { max-height: 260px; overflow: auto; }
.up-row { padding: .5rem .75rem; border-bottom: 1px solid #f0f0f0; font-size: .85rem; }
.up-row .progress { height: 4px; margin-top: .3rem; }
.drive-usage .progress { height: 6px; margin: .3rem 0; }
#pvBody img, #pvBody video { max-width: 100%; max-height: 78vh; }
#pvBody iframe { width: 100%; height: 78vh; border: 0; background: #fff; }
#pvBody pre { text-align: left; color: #eee; max-height: 78vh; overflow: auto; padding: 1rem; white-space: pre-wrap; }
@media (max-width: 767px) {
  .drive { flex-direction: column; }
  .drive-side { width: 100%; }
  .drive-nav { flex-direction: row !important; overflow-x: auto; }
  .drive-nav .nav-link { border-radius: 20px; white-space: nowrap; }
  .drive-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}