@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --indigo:#22306A; --indigo-deep:#182148; --marigold:#E0921C; --marigold-deep:#9A5F06;
  --leaf:#1F5C48; --rust:#A93B24; --page:#F4F5F9; --line:#D8DCE8; --ink:#1B1D28; --muted:#5C6178;
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0; background:var(--page); color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif; font-size:15px; line-height:1.6;}
a{color:var(--indigo);}
h1{font-size:26px; margin:0; letter-spacing:-.015em;}
h2{font-size:15px; margin:0 0 14px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);}
:focus-visible{outline:3px solid var(--marigold); outline-offset:2px;}

.topbar{background:var(--indigo-deep); color:#fff; display:flex; align-items:center;
  justify-content:space-between; padding:14px 22px; gap:16px; flex-wrap:wrap;}
.brand{font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:14px;}
.brand span{color:#9AA6D0; font-weight:600; margin-left:8px; letter-spacing:.16em; font-size:11px;}
.who{display:flex; align-items:center; gap:16px; font-size:13px; color:#B9C2E2;}
.who a{color:#fff; font-weight:700; text-decoration:none;}
.viewsite{border:1px solid rgba(255,255,255,.35); padding:6px 12px; border-radius:5px;}

.shell{display:grid; grid-template-columns:220px 1fr; align-items:start;}
@media(max-width:860px){.shell{grid-template-columns:1fr;}}
.rail{background:var(--indigo); min-height:calc(100vh - 54px); padding:16px 0 30px;}
@media(max-width:860px){.rail{min-height:0; display:flex; gap:6px; overflow-x:auto; padding:10px;}}
.raillabel{color:#8E9BCB; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  margin:16px 0 8px; padding:0 18px;}
@media(max-width:860px){.raillabel{display:none;}}
.rail a{display:block; color:#D3D9EE; text-decoration:none; padding:10px 18px; font-weight:600;
  font-size:14px; border-left:4px solid transparent; white-space:nowrap;}
.rail a:hover{background:rgba(255,255,255,.07); color:#fff;}
.rail a.on{background:rgba(224,146,28,.16); border-left-color:var(--marigold); color:#fff;}
@media(max-width:860px){.rail a{border-left:0; border-bottom:3px solid transparent; border-radius:5px;
  background:rgba(255,255,255,.06); padding:9px 13px;} .rail a.on{border-bottom-color:var(--marigold);}}
.pill{background:var(--marigold); color:#1B1D28; border-radius:99px; padding:1px 7px; font-size:11px; margin-left:5px;}

.main{padding:26px 30px 70px; min-width:0;}
@media(max-width:640px){.main{padding:20px 15px 50px;}}
.lede{color:var(--muted); margin:6px 0 0; font-size:14px;}
.crumb{margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.12em;}
.pagehead{display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  flex-wrap:wrap; margin-bottom:22px;}

.flash{background:#E6F3ED; border-left:5px solid var(--leaf); padding:12px 16px; border-radius:6px;
  margin-bottom:20px; font-weight:600;}
.errbox{background:#FBEDEA; border-left:5px solid var(--rust); padding:12px 16px; border-radius:6px; margin-bottom:20px;}
.errbox p{margin:4px 0; font-weight:600; color:var(--rust);}
.ok{color:var(--leaf); font-weight:700;}
.err{color:var(--rust); font-weight:700;}

.btn{display:inline-block; border:2px solid var(--line); background:#fff; color:var(--ink);
  padding:11px 18px; border-radius:6px; font-weight:700; font-size:14px; text-decoration:none;
  cursor:pointer; font-family:'Manrope',sans-serif;}
.btn:hover{border-color:var(--indigo);}
.btn.primary{background:var(--indigo); border-color:var(--indigo); color:#fff;}
.btn.primary:hover{background:var(--indigo-deep); border-color:var(--indigo-deep);}
.btn.ghost{background:#fff;}
.btn.danger{background:#fff; border-color:#E3BDB4; color:var(--rust);}
.btn.danger:hover{background:#FBEDEA; border-color:var(--rust);}
.btn.small{padding:7px 12px; font-size:13px;}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin-bottom:26px;}
.card{background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px;
  text-decoration:none; color:var(--ink); display:block;}
.card:hover{border-color:var(--indigo);}
.card.alert{border-color:var(--marigold); background:#FEF8EC;}
.card b{font-size:32px; display:block; line-height:1.1;}
.card b span{font-size:17px; color:var(--muted); font-weight:600;}
.cardlabel{display:block; font-weight:700; margin-top:8px;}
.cardsub{display:block; font-size:12px; color:var(--muted);}

.panel{background:#fff; border:1px solid var(--line); border-radius:8px; padding:22px 24px; margin-bottom:18px;}
.searchbar{display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap;}
.searchbar input,.searchbar select{border:2px solid var(--line); border-radius:6px; padding:10px 13px;
  font-family:'Manrope',sans-serif; font-size:14px; min-width:220px;}
.searchbar button{border:2px solid var(--line); background:#fff; border-radius:6px; padding:10px 16px;
  font-weight:700; cursor:pointer; font-family:'Manrope',sans-serif;}
.inlinelabel{margin:0; font-size:13px;}

.grid{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.grid th{text-align:left; font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); padding:12px 14px; border-bottom:1px solid var(--line); background:#FAFBFD;}
.grid td{padding:12px 14px; border-bottom:1px solid #EDEFF5; vertical-align:middle;}
.grid tr:last-child td{border-bottom:0;}
.grid td.strong a{font-weight:700; text-decoration:none;}
.grid td.strong a:hover{text-decoration:underline;}
.right{text-align:right;} .nowrap{white-space:nowrap;}
.inline{display:inline;}
.status{border:1px solid; border-radius:5px; padding:4px 9px; font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; font-family:'Manrope',sans-serif;}
.status.live{color:var(--leaf); border-color:#A9CFC0; background:#EEF7F3;}
.status.draft{color:var(--rust); border-color:#E3C3BB; background:#FBF2F0;}
.empty{background:#fff; border:1px dashed var(--line); border-radius:8px; padding:44px 20px; text-align:center;}
.empty p{color:var(--muted); margin:0 0 16px;}

.editform{max-width:860px;}
.narrowform{max-width:480px;}
.field{margin-bottom:20px;}
.field.half{display:inline-block; width:calc(50% - 10px); margin-right:16px; vertical-align:top;}
@media(max-width:640px){.field.half{width:100%; margin-right:0;}}
.field label{display:block; font-weight:800; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px;}
.field input[type=text],.field input[type=password],.field input[type=date],
.field input[type=number],.field textarea,.field select{
  width:100%; border:2px solid var(--line); border-radius:6px; padding:11px 13px;
  font-family:'Manrope',sans-serif; font-size:15px; background:#fff; color:var(--ink);}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--indigo);}
.field .narrow{max-width:140px;}
.field textarea{resize:vertical; min-height:70px;}
.hint{font-size:12.5px; color:var(--muted); margin:6px 0 0;}
.check{display:flex; align-items:center; gap:9px; font-weight:700; text-transform:none;
  letter-spacing:0; font-size:15px; color:var(--ink);}
.check input{width:20px; height:20px;}
.formfoot{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-top:6px;}
.dangerform{margin-top:34px; padding-top:20px; border-top:1px solid var(--line);}
.editor-fallback-note{background:#FEF8EC; border-left:4px solid var(--marigold);
  padding:10px 14px; font-size:13px; margin-top:8px; border-radius:5px;}
.thumbrow{display:flex; align-items:center; gap:16px; margin-bottom:10px;}
.thumb{width:96px; height:96px; object-fit:cover; border-radius:6px; border:2px solid var(--line);}

.photogrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin-bottom:18px;}
.photogrid.small{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.photo{background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px;}
.photo img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:5px; margin-bottom:8px;}
.photo input{width:100%; border:2px solid var(--line); border-radius:5px; padding:7px 9px;
  font-family:'Manrope',sans-serif; font-size:13px; margin-bottom:7px;}
.tinylabel{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-weight:800; display:block; margin-bottom:3px;}

.msg{background:#fff; border:1px solid var(--line); border-left:5px solid var(--line);
  border-radius:8px; padding:16px 20px; margin-bottom:12px;}
.msg.unread{border-left-color:var(--marigold); background:#FEFBF4;}
.msghead{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:8px;}
.msgmeta{color:var(--muted); font-size:13px; margin-left:10px;}
.msgbody{margin:0; white-space:pre-line;}

.loginpage{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;}
.loginbox{background:#fff; border:1px solid var(--line); border-radius:10px; padding:34px;
  width:100%; max-width:400px; box-shadow:0 4px 24px rgba(24,33,72,.08);}
.loginbox h1{font-size:22px; margin-bottom:18px;}
.loginbox label{display:block; font-weight:800; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:16px 0 6px;}
.loginbox input{width:100%; border:2px solid var(--line); border-radius:6px; padding:12px 14px;
  font-family:'Manrope',sans-serif; font-size:16px;}
.loginbox button{width:100%; margin-top:22px; background:var(--indigo); color:#fff; border:0;
  border-radius:6px; padding:14px; font-weight:800; font-size:16px; cursor:pointer;
  font-family:'Manrope',sans-serif;}
.tiny{font-size:13px; color:var(--muted); margin-top:14px;}

/* ---------- language tabs on the edit form ---------- */
.langtabs{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:20px;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:11px 14px;}
.langtabs span{font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:800;}
.langtabs a{text-decoration:none; color:var(--ink); border:2px solid var(--line); border-radius:6px;
  padding:7px 13px; font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px;}
.langtabs a:hover{border-color:var(--indigo);}
.langtabs a.on{background:var(--indigo); border-color:var(--indigo); color:#fff;}
.langtabs b{font-size:10px; font-weight:800; padding:2px 6px; border-radius:99px;}
.langtabs b.none{background:#F0E2DF; color:#A93B24;}
.langtabs b.part{background:#FBEEDA; color:#8A5A05;}
.langtabs b.full{background:#E1F1EA; color:#1F5C48;}
.langtabs a.on b{background:rgba(255,255,255,.22); color:#fff;}

.origtext{background:#F7F8FC; border-left:4px solid var(--line); border-radius:5px;
  padding:10px 14px; margin-bottom:8px; font-size:14px; color:var(--muted); line-height:1.6;}
.origtext p{margin:0 0 .5em;} .origtext p:last-child{margin:0;}
.origtext h3,.origtext h4{font-size:15px; margin:.4em 0;}