:root{
  --paper:#F7F7F4; --card:#FFFFFF; --ink:#22303A; --ink-soft:#5B6B76; --line:#E3E5E0;
  --accent:#0E7490; --accent-soft:#E6F3F6;
  --good:#1A7F4B; --good-soft:#EAF6EF;
  --warn:#B45309; --warn-soft:#FDF3E3;
  --bad:#B3403A;  --bad-soft:#FBEEED;
  --chip:#EEF1EC;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Heebo',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:15px; line-height:1.6;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.7rem; margin:0 0 14px; text-wrap:balance}
h2{font-size:1.1rem; margin:0 0 10px}
h3{font-size:.95rem; margin:14px 0 6px; color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.error{color:var(--bad); font-weight:600}

.topbar{background:var(--ink); color:#fff}
.topbar-inner{max-width:1060px; margin:0 auto; padding:10px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px}
.brand{color:#fff; font-size:1.05rem; letter-spacing:.02em}
.brand b{color:#7FD1E3}
.navlinks{display:flex; gap:18px; align-items:center}
.navlinks a{color:#D9E2E8}
.linklike{background:none; border:none; color:#D9E2E8; cursor:pointer; font:inherit; padding:0}
.linklike:hover{text-decoration:underline}
.topbar .btn{background:transparent; border-color:#FFFFFF66; color:#fff}
.topbar .btn:hover{background:#FFFFFF1A}

.wrap{max-width:1060px; margin:0 auto; padding:26px 20px 60px}
.wrap.narrow{max-width:760px}
.foot{text-align:center; color:var(--ink-soft); font-size:.78rem; padding:18px 0 30px}

.panel{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:14px}
.panel.center{text-align:center; padding:40px}
.grid2{display:grid; grid-template-columns:1.2fr 1fr; gap:14px}
@media (max-width:800px){ .grid2{grid-template-columns:1fr} }

.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:18px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column}
.stat .num{font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums}
.stat .lbl{font-size:.8rem; color:var(--ink-soft)}
.stat.st-client_review .num{color:var(--warn)}
.stat.st-changes .num{color:var(--bad)}
.stat.st-approved .num, .stat.st-published .num{color:var(--good)}

.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl th,.tbl td{padding:8px 10px; text-align:start; border-bottom:1px solid var(--line)}
.tbl thead th{color:var(--ink-soft); font-weight:600; font-size:.8rem}
.tbl tbody tr:last-child td{border-bottom:none}

.chip{display:inline-block; background:var(--chip); border-radius:99px; padding:1px 10px; font-size:.75rem; color:var(--ink-soft); margin-inline-start:6px; white-space:nowrap}
.chip.good{background:var(--good-soft); color:var(--good); font-weight:600}
.chip.warn{background:var(--warn-soft); color:var(--warn); font-weight:600}
.chip.bad{background:var(--bad-soft); color:var(--bad); font-weight:600}
.chip.lang{background:var(--accent-soft); color:var(--accent)}
.chip.st-client_review{background:var(--warn-soft); color:var(--warn)}
.chip.st-changes{background:var(--bad-soft); color:var(--bad)}
.chip.st-approved,.chip.st-published{background:var(--good-soft); color:var(--good)}
.chip.st-draft,.chip.st-internal{background:var(--chip); color:var(--ink-soft)}

.uplist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.88rem}
.uplist li{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.update{font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.8rem; white-space:nowrap}

.btn{display:inline-block; background:var(--chip); color:var(--ink); border:1px solid var(--line);
     border-radius:7px; padding:7px 16px; font:inherit; font-size:.88rem; font-weight:500; cursor:pointer}
.btn:hover{filter:brightness(.96); text-decoration:none}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.good{background:var(--good); border-color:var(--good); color:#fff; font-weight:600}
.btn.danger{background:var(--bad-soft); border-color:var(--bad); color:var(--bad)}
.btn.ghost{background:transparent}
.btn.small{padding:3px 12px; font-size:.8rem}
.btn.wide{width:100%}
.btnrow{display:flex; gap:10px; margin-top:10px}
.inline{display:inline}

input,select,textarea{
  font:inherit; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:7px; padding:7px 10px; max-width:100%;
}
textarea{width:100%; resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.row-form{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.row-form input[name=name]{min-width:180px}
.filelab{font-size:.85rem; color:var(--ink-soft); display:block}

.login-page{display:flex; align-items:center; justify-content:center; min-height:100vh}
.login-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:34px 38px; width:340px; display:flex; flex-direction:column; gap:12px; text-align:center}
.brand-lg{font-size:1.4rem; margin:0}
.brand-lg b{color:var(--accent)}
.login-card form{display:flex; flex-direction:column; gap:10px}

.pagehead{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:14px}
.pagehead h1{margin:0}
.pagehead-side{display:flex; gap:8px; align-items:center}

.newpost summary{list-style:none; width:max-content}
.newpost summary::-webkit-details-marker{display:none}
.post-form{margin-top:14px}
.fields{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
.fieldrow{display:flex; gap:8px; flex-wrap:wrap}

.post-card{border-inline-start:4px solid var(--line)}
.st-border-client_review{border-inline-start-color:var(--warn)}
.st-border-changes{border-inline-start-color:var(--bad)}
.st-border-approved,.st-border-published{border-inline-start-color:var(--good)}
.post-head{display:flex; justify-content:space-between; align-items:start; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.post-body{white-space:pre-wrap; background:var(--paper); border-radius:8px; padding:12px 14px; margin:10px 0 8px; text-align:start; max-width:65ch}
.media-thumb img,.media-thumb video{max-width:320px; max-height:320px; width:auto; border-radius:8px; border:1px solid var(--line); margin-top:8px}

.client-row .client-name{font-size:1rem; min-width:140px}
.client-row.inactive{opacity:.55}
.client-link{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; font-size:.83rem}
.client-link code{background:var(--paper); padding:3px 8px; border-radius:6px; direction:ltr; overflow-wrap:anywhere}

.client-hero{margin-bottom:22px}
.group-title{margin:26px 0 10px; display:flex; align-items:center; gap:8px}
.group-title .count{background:var(--accent-soft); color:var(--accent); border-radius:99px; padding:0 10px; font-size:.8rem}
.approve-row{display:flex; gap:10px; align-items:start; margin-top:12px; flex-wrap:wrap}
.changes-details summary{list-style:none; width:max-content}
.changes-details summary::-webkit-details-marker{display:none}
.changes-details form{margin-top:8px; display:flex; flex-direction:column; gap:8px; min-width:280px}
.okline{color:var(--good); font-weight:600; margin:10px 0 0}

.comments{margin-top:14px}
.comment-list{display:flex; flex-direction:column; gap:8px}
.comment{background:var(--paper); border-radius:8px; padding:8px 12px; font-size:.88rem}
.comment.client{background:var(--accent-soft)}
.comment .who{font-weight:600; font-size:.78rem}
.comment .when{color:var(--ink-soft); font-size:.72rem; margin-inline-start:8px}
.comment p{margin:2px 0 0; white-space:pre-wrap; text-align:start}
.comment-form{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.comment-form input{flex:1; min-width:200px}
.comment-form textarea{width:100%}

/* ---- monthly calendar (adopted from the Kaveret content-calendar template) ---- */
.tablewrap{overflow-x:auto}
.cal{width:100%; min-width:820px; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; table-layout:fixed}
.cal th{padding:8px; background:var(--chip); color:var(--ink-soft); font-size:.8rem; font-weight:600; border:1px solid var(--line)}
.cal td{border:1px solid var(--line); vertical-align:top; padding:6px; height:96px}
.cal td.empty{background:var(--paper)}
.cal td.today{outline:2px solid var(--accent); outline-offset:-2px}
.daynum{display:block; font-size:.78rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; margin-bottom:4px}
.cal-item{display:flex; gap:4px; align-items:baseline; font-size:.74rem; line-height:1.35;
          border-radius:5px; padding:2px 6px; margin-bottom:3px; color:var(--ink);
          border-inline-start:3px solid var(--line); background:var(--paper); overflow:hidden}
.cal-item:hover{text-decoration:none; filter:brightness(.95)}
.ci-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-item.st-cal-published,.cal-item.st-cal-scheduled{opacity:.65}
.pl-facebook{border-inline-start-color:#1877F2}
.pl-instagram{border-inline-start-color:#C13584}
.pl-linkedin{border-inline-start-color:#0A66C2}
.pl-tiktok{border-inline-start-color:#111}
.pl-youtube{border-inline-start-color:#FF0000}
.pl-email{border-inline-start-color:#6B7280}
.cal-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:.8rem; color:var(--ink-soft); margin-bottom:10px; align-items:center}
.cal-legend .pl{padding-inline-start:8px; border-inline-start:3px solid var(--line)}
.cal-legend .pl-facebook{border-inline-start-color:#1877F2}
.cal-legend .pl-instagram{border-inline-start-color:#C13584}
.cal-legend .pl-linkedin{border-inline-start-color:#0A66C2}
.cal-legend .pl-tiktok{border-inline-start-color:#111}
.cal-legend .pl-youtube{border-inline-start-color:#FF0000}
.cal-legend .pl-email{border-inline-start-color:#6B7280}
.cal-legend .sep{color:var(--line)}

@media (max-width:600px){
  .wrap{padding:16px 12px 50px}
  .media-thumb img,.media-thumb video{max-width:100%}
}