/* JRS Website · back office (from prototype/admin.html) */
:root{--navy:#142B49;--blue:#293CCB;--gold:#E8C547;--warm:#FAF8F2;--ink:#333C46;--muted:#6B7684;--line:#E4E1D8;--r:12px}
*{box-sizing:border-box}
body{margin:0;background:var(--warm);color:var(--ink);font:15px/1.6 'Noto Sans Thai','Prompt',sans-serif;overflow-x:hidden}
h1,h2,h3,button,.side,label,.pill{font-family:'Prompt',sans-serif}
a{color:inherit;text-decoration:none}
.proto{background:var(--gold);color:var(--navy);text-align:center;font:500 13px 'Prompt';padding:4px 8px}
.app{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 27px)}
.side{background:var(--navy);color:#cfd6e2;padding:18px 12px;display:flex;flex-direction:column;gap:4px}
.side .b{display:flex;gap:10px;align-items:center;color:#fff;font-weight:600;padding:4px 8px 18px}
.side .b img{height:40px}
.side a{padding:9px 12px;border-radius:8px;display:flex;justify-content:space-between}
.side a:hover{background:rgba(255,255,255,.08)}
.side a.on{background:var(--blue);color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
.side .cnt{font-size:12px;background:rgba(255,255,255,.12);border-radius:999px;padding:0 8px}
.side .bottom{margin-top:auto}
main{padding:24px;min-width:0}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.bar h1{margin:0;font-size:24px;color:var(--navy)}
button{border:0;border-radius:999px;padding:10px 20px;font-weight:600;font-size:14.5px;cursor:pointer}
.primary{background:var(--blue);color:#fff}
.gold{background:var(--gold);color:var(--navy)}
.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 10px rgba(20,43,73,.06);padding:20px}
label{display:block;font-weight:500;font-size:14px;margin:0 0 6px;color:var(--navy)}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;background:#fff}
input:focus,textarea:focus,select:focus{outline:2px solid #c9cff5;border-color:var(--blue)}
.f{margin-bottom:16px}
.types{display:flex;gap:8px;flex-wrap:wrap}
.types span{padding:7px 14px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font:500 14px 'Prompt';background:#fff}
.types span.on{background:var(--blue);border-color:var(--blue);color:#fff}
.tools{display:flex;gap:4px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;padding:6px;background:var(--warm);flex-wrap:wrap}
.tools b{padding:4px 10px;border-radius:6px;cursor:pointer;font-weight:600}
.tools b:hover{background:#fff}
textarea{border-radius:0 0 10px 10px;min-height:220px;resize:vertical}
.drop{border:2px dashed #c9cff5;border-radius:12px;padding:22px;text-align:center;color:var(--muted);background:#f7f8ff}
.drop b{color:var(--blue)}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumbs div{width:74px;height:56px;border-radius:8px;background:url(/assets/img/campus-1.webp) center/cover}
.thumbs div:nth-child(2){background-image:url(/assets/img/campus-2.webp)}
.thumbs div.cover{outline:3px solid var(--gold)}
.hint{font-size:13px;color:var(--muted)}
.guide{display:flex;gap:10px;align-items:center;background:#eef0fb;border-radius:12px;padding:10px 12px;margin-bottom:16px}
.guide img{height:64px}
.preview{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.preview .img{height:150px;background:url(/assets/img/campus-1.webp) center/cover}
.preview .t{padding:12px}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 10px;border-radius:6px;background:#fdf1d8;color:#a96500}
.list .row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.list .row:first-child{border-top:0}
.ok{background:#e3f4ea;color:#1f8a4c}
.wait{background:#fdf1d8;color:#a96500}
.check{display:flex;gap:8px;align-items:center;margin:6px 0}
.check input{width:auto}
@media (max-width:1024px){.grid{grid-template-columns:1fr}}
@media (max-width:760px){.app{grid-template-columns:1fr}.side{flex-direction:row;overflow-x:auto;padding:8px;gap:6px}.side .b,.side .bottom{display:none}.side a{white-space:nowrap}.side .cnt{display:none}main{padding:16px}}

/* --- real back office --- */
.side a.on .cnt{background:rgba(255,255,255,.25)}
.side .who{margin-top:auto;padding:10px 12px;font-size:13px;color:#9fb0c8;border-top:1px solid rgba(255,255,255,.1)}
.side .who b{display:block;color:#fff;font-weight:500}
.side form{margin:0}
.side form button{background:none;color:#cfd6e2;padding:9px 12px;width:100%;text-align:left;border-radius:8px;font-weight:400}
.side form button:hover{background:rgba(255,255,255,.08)}
.flash{background:#e3f4ea;color:#1f8a4c;border-radius:12px;padding:10px 14px;margin-bottom:16px;font:500 14.5px 'Prompt'}
.flash.err{background:#fde8e6;color:#b42318}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters a{padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 14px 'Prompt'}
.filters a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.filters form{margin-left:auto;display:flex;gap:6px}
.filters input{width:220px;padding:8px 12px}
.rows{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.it{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.it:first-child{border-top:0}
.it .th{width:84px;height:60px;border-radius:8px;background:#eef0fb center/cover;display:grid;place-items:center;font-size:22px}
.it h3{margin:0 0 2px;font-size:16px;color:var(--navy);font-family:'Prompt'}
.it h3 a:hover{color:var(--blue)}
.it small{color:var(--muted)}
.it .acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.it .acts form{margin:0}
.btn-s{padding:6px 14px;font-size:13.5px}
.pill.pub{background:#e3f4ea;color:#1f8a4c}
.pill.hid{background:#eceef1;color:#5b6472}
.editor{border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;min-height:260px;padding:12px 14px;background:#fff;outline:none;line-height:1.75;font-size:16px}
.editor:focus{border-color:var(--blue);box-shadow:0 0 0 2px #c9cff5}
.editor h2{font:600 21px 'Prompt';color:var(--navy);margin:14px 0 6px}
.editor h3{font:600 18px 'Prompt';color:var(--navy);margin:12px 0 6px}
.editor p{margin:0 0 10px}
.tools button{background:none;border-radius:6px;padding:4px 10px;font-weight:600;color:var(--ink)}
.tools button:hover{background:#fff}
.imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:10px}
.imgs .im{position:relative;border-radius:10px;overflow:hidden;border:2px solid transparent;background:var(--warm)}
.imgs .im.cover{border-color:var(--gold)}
.imgs img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.imgs .im div{display:flex;gap:4px;padding:6px;flex-wrap:wrap}
.imgs .im button{padding:4px 9px;font-size:12px;font-weight:500}
.imgs .im .badge{position:absolute;top:6px;left:6px;background:var(--gold);color:var(--navy);font:600 11px 'Prompt';border-radius:6px;padding:1px 7px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.danger{background:#fde8e6;color:#b42318}
.login{max-width:420px;margin:8vh auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;text-align:center;box-shadow:0 14px 40px rgba(20,43,73,.1)}
.login img.logo{height:70px;margin:0 auto 10px}
.login h1{font-size:22px;color:var(--navy);margin:0 0 6px}
.login .gbtn{display:flex;justify-content:center;margin:18px 0 6px;min-height:44px}
.login .dev{text-align:left;margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.login .dev button{width:100%;margin-top:6px;text-align:left}
table.t{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.t th,table.t td{padding:10px 12px;border-top:1px solid var(--line);text-align:left;font-size:14.5px;vertical-align:top}
table.t th{background:var(--warm);font:500 13.5px 'Prompt';color:var(--muted);border-top:0}
.slide{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}
.slide .ph{aspect-ratio:16/9;border-radius:10px;background:#142B49 center/cover}
@media (max-width:760px){.it{grid-template-columns:60px 1fr}.it .th{width:60px;height:46px}.it .acts{grid-column:1/-1;justify-content:flex-start}.filters form{margin-left:0;width:100%}.filters input{flex:1;width:auto}.two-col,.slide{grid-template-columns:1fr}table.t{display:block;overflow-x:auto}}