:root{ --paper:#faf8f1; --ink:#0a1030; --blue:#1a2766; --orange:#ff5722; --line:#e6e0cd; --dim:#5c6287; }
*{ box-sizing:border-box }
body.admin-body{ margin:0; font-family: ui-sans-serif, system-ui, sans-serif; background:var(--paper); color:var(--ink); line-height:1.55 }
.admin-login{ max-width:400px; margin:8vh auto; padding:32px; background:#fff; border:1px solid var(--line); border-radius:10px }
.admin-login h1{ font-family:Georgia,serif; margin:0 0 6px }
.admin-login .hint{ color:var(--dim); font-size:13px; margin-bottom:24px }
.admin-login label{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; font-size:13px }
.admin-login input{ padding:10px 12px; border:1px solid var(--line); border-radius:6px; font-size:15px }
.admin-login button{ padding:10px 18px; background:var(--blue); color:#fff; border:0; border-radius:999px; font-size:14px; cursor:pointer }
.admin-login .err{ color:var(--orange); font-size:13px; margin-top:12px }
.admin-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 32px; border-bottom:1px solid var(--line); background:#fff }
.admin-head h1{ margin:0; font-family:Georgia,serif; font-size:22px }
.admin-head .back{ color:var(--dim); text-decoration:none; font-size:14px }
.admin-head .link{ background:none; border:0; color:var(--dim); cursor:pointer; font-size:13px }
.admin-main{ max-width:880px; margin:0 auto; padding:32px }
.admin-main h2{ font-family:Georgia,serif; font-size:28px; margin:0 0 18px }
.dept-list{ list-style:none; padding:0; display:grid; gap:8px }
.dept-list li a{ display:flex; flex-direction:column; gap:4px; padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--ink) }
.dept-list li a:hover{ border-color:var(--blue) }
.dept-list .short{ color:var(--dim); font-size:13px }
.dept-form{ display:flex; flex-direction:column; gap:14px; background:#fff; padding:24px; border:1px solid var(--line); border-radius:10px }
.dept-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--dim) }
.dept-form label.row{ flex-direction:row; align-items:center; gap:10px; color:var(--ink) }
.dept-form input, .dept-form textarea{ padding:10px 12px; border:1px solid var(--line); border-radius:6px; font-size:14px; font-family:inherit; color:var(--ink) }
.dept-form textarea{ font-family: ui-monospace, monospace; font-size:13px; resize:vertical }
.dept-form button.primary{ align-self:flex-start; padding:10px 22px; background:var(--blue); color:#fff; border:0; border-radius:999px; cursor:pointer; font-size:14px }
.dept-form button.ghost{ align-self:flex-start; padding:10px 16px; background:transparent; color:var(--blue); border:1px solid var(--blue); border-radius:999px; cursor:pointer; font-size:13px }
.team-photo-picker{ display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--paper) }
.team-photo-picker > label{ display:block; color:var(--blue); font-family:Georgia,serif; font-size:14px }
.picker-row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center }
.team-photo-preview{ width:200px; height:120px; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:#fff }
.staff-fieldset{ margin-bottom:0; background:var(--paper) }
.staff-fieldset #staffRows{ display:flex; flex-direction:column; gap:12px }
.staff-row{ display:flex; gap:12px; align-items:flex-start; padding:12px; background:#fff; border:1px solid var(--line); border-radius:8px }
.staff-preview{ width:60px; height:60px; flex:0 0 60px; border-radius:8px; background:var(--paper); border:1px dashed var(--line); overflow:hidden }
.staff-preview img{ width:60px; height:60px; object-fit:cover }
.staff-inputs{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px }
.staff-inputs input:first-child, .staff-inputs textarea{ grid-column:1 / -1 }
.remove-staff{ flex:0 0 auto; padding:4px 0; background:none; border:0; color:var(--orange); cursor:pointer; font-size:12px }
.history{ margin-top:32px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:10px }
.history h3{ margin:0 0 12px; font-family:Georgia,serif; font-size:18px }
.history ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:6px }
.history li{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13px }
.history code{ font-family:ui-monospace,monospace; color:var(--dim); font-size:12px }
.ok{ color:#0a7d2c; padding:10px 14px; background:#e6f4ea; border-radius:6px; margin-bottom:14px }
.approved-panel{ margin-top:32px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:10px }
.approved-panel h3{ margin:0 0 6px; font-family:Georgia,serif; font-size:18px }
.approved-panel .hint{ color:var(--dim); font-size:12px; margin-bottom:18px }
.slot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px }
.slot{ padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--paper); display:flex; flex-direction:column; gap:10px }
.slot.filled{ border-color:var(--blue); background:#fff }
.slot.empty{ opacity:.85 }
.slot-head{ display:flex; justify-content:space-between; align-items:baseline }
.slot-head strong{ font-family:Georgia,serif; font-size:18px }
.slot-meta{ font-family:ui-monospace,monospace; font-size:11px; color:var(--dim) }
.slot-label{ margin:0; font-size:13px; color:var(--ink); font-style:italic }
.slot-form{ display:flex; flex-direction:column; gap:8px }
.slot-form input{ padding:8px 10px; border:1px solid var(--line); border-radius:5px; font-size:12px }
.slot-form button.ghost{ padding:8px 10px; background:transparent; color:var(--blue); border:1px solid var(--blue); border-radius:999px; cursor:pointer; font-size:12px }
.slot-actions{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; padding-top:8px; border-top:1px dashed var(--line) }
.slot-actions button.primary.small{ padding:6px 14px; font-size:12px; background:var(--blue); color:#fff; border:0; border-radius:999px; cursor:pointer }
.slot-actions button.link{ background:none; border:0; color:var(--orange); cursor:pointer; font-size:12px }
fieldset{ border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin-bottom:18px }
fieldset legend{ font-family:Georgia,serif; font-size:14px; padding:0 8px; color:var(--blue) }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.gallery-row{ display:grid; grid-template-columns:120px 1fr; gap:14px; padding:10px 0; border-bottom:1px dashed var(--line) }
.gallery-row img{ width:120px; height:80px; object-fit:cover; border-radius:6px; background:var(--paper) }
.gallery-row > div{ display:flex; flex-direction:column; gap:6px }
.gallery-row input{ padding:6px 10px; border:1px solid var(--line); border-radius:5px; font-size:12px }
.upload-btn{ display:inline-block; padding:6px 12px; background:var(--blue); color:#fff; border-radius:999px; font-size:12px; cursor:pointer; align-self:flex-start }
.upload-btn input{ display:none }
.img-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px }
.img-card{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:6px }
.img-card img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px }
.img-card code{ font-size:10px; color:var(--dim); word-break:break-all; font-family:ui-monospace,monospace }