/* ===== หลังบ้าน — ม่วงพาสเทล ===== */
:root{--v8:#4A2F86;--v6:#6D4FBF;--v4:#A58BE6;--l2:#DED2F7;--l1:#EEE7FC;--l0:#F7F4FD;--ink:#2E2645;--muted:#6B6383;--line:#E6DEF6;--ok:#1E7A4A;--okbg:#E4F5EC;--bad:#B3263E;--badbg:#FDECEE;--warnbg:#FFF4D6;--warn:#7A5800}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 'Sarabun',system-ui,sans-serif;color:var(--ink);background:var(--l0)}
h1,h2,h3{font-family:'Mitr',sans-serif;font-weight:500;color:var(--v8);margin:0 0 .4em;line-height:1.3}
h2{font-size:1.1rem}
a{color:var(--v8)}
:focus-visible{outline:3px solid var(--v4);outline-offset:2px}
.muted{color:var(--muted)}.sm{font-size:.85rem}.r{text-align:right}.nowrap{white-space:nowrap}.pad{padding:0 18px 14px}
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}

/* sidebar */
.side{background:#fff;border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.side-brand{display:flex;gap:10px;align-items:center;text-decoration:none;padding:4px 8px 20px}
.side-brand .mark{width:42px;height:42px;border-radius:50% 50% 12px 12px;background:var(--l1);color:var(--v8);display:grid;place-items:center;font-size:1.3rem;flex:none}
.side-brand b{display:block;font:500 .98rem 'Mitr';color:var(--v8);line-height:1.3}
.side-brand small{color:var(--muted);font-size:.8rem}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink);font-family:'Mitr';font-size:.95rem}
.side nav a i{font-size:1.1rem;color:var(--v6)}
.side nav a:hover{background:var(--l0)}
.side nav a.on{background:var(--l1);color:var(--v8)}
.badge{margin-left:auto;background:var(--v6);color:#fff;border-radius:999px;font-size:.75rem;padding:0 8px}
.view-site{display:block;margin-top:14px;padding:10px 12px;border-radius:12px;border:1px dashed var(--l2);text-decoration:none;font-size:.9rem}

/* topbar */
.main{min-width:0}
.top{display:flex;align-items:center;gap:16px;padding:14px 28px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top h1{font-size:1.3rem;margin:0;flex:1}
.me{display:flex;align-items:center;gap:12px}
.me > a:first-child{text-decoration:none;color:var(--ink)}
.menu-btn{display:none;border:0;background:var(--l1);color:var(--v8);width:40px;height:40px;border-radius:12px;font-size:1.3rem;cursor:pointer}
.content{padding:26px 28px 60px;max-width:1300px}
.hello{color:var(--muted);margin:0 0 16px}

/* elements */
.btn{display:inline-flex;align-items:center;gap:7px;font:400 .95rem 'Mitr';padding:10px 18px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;background:none;color:var(--v8)}
.btn.primary{background:var(--v6);color:#fff}.btn.primary:hover{background:var(--v8)}
.btn.ghost{border-color:var(--l2);background:#fff}.btn.ghost:hover{background:var(--l0)}
.btn.sm{padding:6px 12px;font-size:.85rem}
.btn.block{width:100%;justify-content:center}
.danger{color:var(--bad)!important}
.link{background:none;border:0;cursor:pointer;font:inherit;padding:0}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:20px}
.panel.flush{padding:0;overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.panel.flush .panel-head{padding:16px 18px 0}
.stack{display:flex;flex-direction:column;gap:14px}
.stack > h2{margin:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:20px;align-items:start}
.edit-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.narrow{max-width:520px}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.actions form{margin:0}
.actions.sticky{position:sticky;bottom:0;background:var(--l0);padding:12px 0}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.toolbar p{margin:0}
.filter{display:flex;gap:8px;flex-wrap:wrap}
.filter input,.filter select{width:auto;min-width:200px}
.quick{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}

label{display:flex;flex-direction:column;gap:5px;font:400 .92rem 'Mitr';color:var(--ink)}
.lbl{font:400 .92rem 'Mitr';display:block;margin-bottom:5px}
label.check{flex-direction:row;align-items:center;gap:9px;font-family:'Sarabun';font-size:.98rem;cursor:pointer}
label.check input{width:18px;height:18px;accent-color:var(--v6)}
input,select,textarea{font:inherit;font-family:'Sarabun';padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--v4);box-shadow:0 0 0 4px var(--l1)}
input[type=file]{padding:9px;background:var(--l0);border-style:dashed}
.drop input[type=file]{padding:26px;text-align:center}
.preview{width:100%;max-height:220px;object-fit:cover;border-radius:12px;background:var(--l1)}
.preview.portrait{aspect-ratio:3/4;max-height:260px;width:auto;align-self:flex-start}
.preview.logo{max-height:120px;width:auto;object-fit:contain;align-self:flex-start;background:var(--l0);padding:10px}
.editor{min-height:420px;background:#fff;border-radius:0 0 10px 10px;font-size:16px}
.ql-toolbar.ql-snow{border-radius:10px 10px 0 0;border-color:var(--line)!important;font-family:'Sarabun'}
.ql-container.ql-snow{border-color:var(--line)!important}
.ql-editor{font-family:'Sarabun';font-size:16px;line-height:1.7}

.alert{padding:12px 16px;border-radius:12px;margin:0 0 18px}
.alert.success{background:var(--okbg);color:var(--ok)}
.alert.error{background:var(--badbg);color:var(--bad)}
.alert.warn{background:var(--warnbg);color:var(--warn)}

/* tables */
.scroll{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th{font:400 .85rem 'Mitr';color:var(--muted);text-align:left;padding:12px 14px;background:var(--l0);border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table td a{text-decoration:none;font-weight:500}
.table tr.unread td{background:#FBF9FF;font-weight:600}
.panel:not(.flush) .table td{padding-left:0}
.thumb{width:56px;height:42px;object-fit:cover;border-radius:8px;display:block}
.thumb.wide{width:72px;height:72px}
.thumb.round{width:42px;height:42px;border-radius:50%}
.thumb.ph{display:grid;place-items:center;background:var(--l1);color:var(--v4)}
.pill{display:inline-block;font-size:.78rem;padding:1px 10px;border-radius:999px;background:#EFEDF3;color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pin{color:#C08A00}
.row-actions{white-space:nowrap;text-align:right}
.row-actions a,.row-actions button{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;border:0;background:none;color:var(--v6);cursor:pointer;font-size:1rem;vertical-align:middle}
.row-actions a:hover,.row-actions button:hover{background:var(--l1)}
.row-actions form{display:inline}
.empty{text-align:center;color:var(--muted);padding:36px!important}

/* dashboard */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;text-decoration:none;color:var(--ink);display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.stat i{grid-row:span 2;width:48px;height:48px;border-radius:14px;background:var(--l1);color:var(--v8);display:grid;place-items:center;font-size:1.3rem}
.stat b{font:500 1.6rem 'Mitr';color:var(--v8);line-height:1.1}
.stat span{color:var(--muted);font-size:.9rem}
.stat:hover{border-color:var(--v4)}
.rank{margin:0;padding-left:1.3em}
.rank li{padding:6px 0;border-bottom:1px solid var(--line)}
.rank li span{float:right;color:var(--muted);font-size:.85rem}
.rank a{text-decoration:none}
.msg-mini{display:block;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.msg-mini.unread b::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--v6);margin-right:6px}
.msg-mini .muted{float:right}
.msg-body{background:var(--l0);border-radius:12px;padding:18px;white-space:normal}

/* gallery admin */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.album-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.album-card img,.album-card .ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:grid;place-items:center;background:var(--l1);color:var(--v4);font-size:2rem}
.ac-body{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.ac-body a{text-decoration:none}
.ac-body form{margin-top:6px}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.img-item{position:relative}
.img-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;margin-bottom:6px}
.img-item input{font-size:.85rem;padding:6px 8px}
.img-item .del{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--bad);cursor:pointer}

.pager{display:flex;gap:6px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pager a,.pager span{min-width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:#fff;text-decoration:none}
.pager .current{background:var(--v6);color:#fff;border-color:var(--v6)}

/* login / install */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 10%,var(--l1),transparent 50%),radial-gradient(circle at 90% 90%,var(--l2),transparent 45%),var(--l0)}
.auth-card{width:min(400px,100%);background:#fff;border-radius:28px;padding:36px 32px;border:1px solid var(--line);box-shadow:0 24px 60px -30px rgba(74,47,134,.4)}
.auth-card h1{font-size:1.5rem;margin-bottom:2px}
.auth-card .stack{margin-top:18px}
.auth-logo{width:72px;height:72px;object-fit:contain;margin-bottom:12px}
.back{display:block;text-align:center;margin-top:18px;font-size:.9rem;color:var(--muted)}

@media (max-width:1100px){.stat-row{grid-template-columns:repeat(2,1fr)}.cols,.edit-grid{grid-template-columns:1fr}}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:20;transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.15)}
  .side.open{transform:none}
  .menu-btn{display:grid;place-items:center}
  .top{padding:12px 16px}.content{padding:18px 16px 60px}
  .me span{display:none}
  .two{grid-template-columns:1fr}
}
@media (max-width:520px){.stat-row{grid-template-columns:1fr}.me .btn span,.me .btn{font-size:0;gap:0;padding:8px}.me .btn i{font-size:1.1rem}}