/* =========================================================================
   CASIN Media — public archive (WeChat-style reading) + admin workbench
   Palette (from the lab brand deck):
     --navy   #E56028   --gold  #E56028   --paper #FBFAF7
     --ink    #333B36   --muted #6B7570
   ========================================================================= */
:root {
  --navy: #E56028;
  --navy-soft: #C24B1C;
  --gold: #E56028;
  --gold-soft: #F3743C;
  --paper: #FBFAF7;
  --paper-2: #FFFFFF;
  --ink: #333B36;
  --muted: #6B7570;
  --line: #E5E3DA;
  --shadow: 0 24px 60px -30px rgba(51, 59, 54, .5);
  --serif: "EB Garamond", "Libre Baskerville", "Playfair Display", var(--serif);
  --sans: "Open Sans", "Assistant", var(--sans);
}

* { box-sizing: border-box; }

/* =================================================================== PUBLIC */
/* The archive renders inside the site's own shell — the Wix navigation, page
   background and contact footer stay untouched. This styles only the news
   section's content band. */
.casin-archive { background: var(--paper); padding: 30px 0 80px; }
.casin-archive a { color: inherit; }
.casin-archive-in { max-width: 1000px; margin: 0 auto; padding: 0 24px; }

/* --- category tabs -------------------------------------------------------- */
.arch-tabs {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 20px;
}
.arch-tabs::-webkit-scrollbar { display: none; }
.arch-tabs a {
  flex-shrink: 0; text-decoration: none; font-size: 14px; font-weight: 600;
  color: var(--navy); padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; transition: .16s ease;
}
.arch-tabs a:hover { border-color: var(--gold); color: var(--gold); }
.arch-tabs a.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.arch-tabs a .pill {
  margin-left: 7px; padding: 1px 7px; font-size: 11.5px; font-weight: 700;
  border-radius: 999px; background: rgba(51, 59, 54, .08); color: inherit;
}
.arch-tabs a.active .pill { background: rgba(255, 255, 255, .24); }

/* --- listing body --------------------------------------------------------- */

/* featured story */
.arch-feature {
  display: grid; grid-template-columns: 1.02fr .98fr;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow .22s ease, transform .22s ease;
}
.arch-feature:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.arch-feature .feature-media { position: relative; min-height: 260px; background: #EAE6DA; }
.arch-feature .feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arch-feature .tag {
  position: absolute; left: 16px; top: 16px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: #fff;
  background: rgba(51, 59, 54, .88); padding: 6px 12px; border-radius: 999px;
}
.arch-feature .feature-body { padding: 30px 32px; display: flex; flex-direction: column; gap: 12px; }
.arch-feature .feature-kicker { font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.arch-feature h2 {
  font-family: var(--serif); font-size: clamp(21px, 2.3vw, 27px); line-height: 1.3;
  margin: 0; color: var(--navy); font-weight: 700;
}
.arch-feature p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.arch-feature .meta {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--muted); padding-top: 16px; border-top: 1px solid var(--line);
}
.arch-feature .meta .go { margin-left: auto; color: var(--gold); font-weight: 700; font-size: 13px; }

/* category sections */
.arch-section { margin-top: 52px; }
.arch-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.arch-section-head h2 {
  font-family: var(--serif); font-size: 23px; color: var(--navy);
  margin: 0; font-weight: 700; white-space: nowrap;
}
.arch-section-head .rule { flex: 1; height: 1px; background: var(--line); }
.arch-section-head .count { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* WeChat-style rows: text left, thumbnail right */
.arch-list { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.arch-row {
  display: flex; gap: 20px; padding: 20px 22px; text-decoration: none; color: inherit;
  border-bottom: 1px solid #F1EDE2; transition: background .16s ease;
}
.arch-row:last-child { border-bottom: 0; }
.arch-row:hover { background: #F8F9F4; }
.arch-row .row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.arch-row h3 {
  margin: 0; font-size: 16.5px; line-height: 1.45; font-weight: 600; color: var(--navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .16s ease;
}
.arch-row:hover h3 { color: var(--gold); }
.arch-row p {
  margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.arch-row .meta { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #96A2AE; margin-top: 2px; }
.arch-row .meta .cat { color: var(--gold); font-weight: 700; }
.arch-row .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #C9CFD6; }
.arch-row .row-thumb {
  flex-shrink: 0; width: 132px; aspect-ratio: 3 / 2; border-radius: 10px;
  overflow: hidden; background: #EAE6DA; align-self: center;
}
.arch-row .row-thumb img { width: 100%; height: 100%; object-fit: cover; }

.arch-empty { text-align: center; color: var(--muted); padding: 60px 0; }

/* discreet login entry kept inside the archive's own content band */
.band-footnote {
  margin: 46px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: #96A2AE; text-align: center;
}
.band-footnote a { color: var(--gold); text-decoration: none; font-weight: 600; }
.band-footnote a:hover { text-decoration: underline; }
.band-footnote .sep { margin: 0 8px; opacity: .6; }

/* --- article detail ------------------------------------------------------- */
.art { max-width: 730px; margin: 0 auto; padding: 38px 22px 90px; }
.art-back {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  color: var(--muted); font-weight: 600; font-size: 13.5px; margin-bottom: 26px;
}
.art-back:hover { color: var(--gold); }
.art-head { margin-bottom: 26px; }
.art-cat {
  display: inline-block; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 13px;
}
.art h1.art-title {
  font-family: var(--serif); font-size: clamp(26px, 3.6vw, 36px); line-height: 1.28;
  margin: 0 0 18px; color: var(--navy); font-weight: 700;
}
.art-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 11px;
  color: var(--muted); font-size: 13.5px;
  padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid var(--line);
}
.art-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #C9CFD6; }
.art-cover { margin: 0 0 34px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.art-cover img { width: 100%; display: block; }

.art-body { font-size: 17px; line-height: 1.9; color: #2A3947; }
.art-body p { margin: 0 0 16px; }
.art-body p:last-child { margin-bottom: 0; }
.art-body section { max-width: 100%; }
.art-body h1, .art-body h2, .art-body h3, .art-body h4 {
  font-family: var(--serif); color: var(--navy); line-height: 1.4;
  margin: 34px 0 16px; font-weight: 700;
}
.art-body h2 { font-size: 24px; }
.art-body h3 { font-size: 20px; }
.art-body h4 { font-size: 18px; }
.art-body a { color: var(--navy-soft); text-decoration: underline; text-underline-offset: 3px; }
.art-body a:hover { color: var(--gold); }
.art-body strong { color: var(--navy); font-weight: 700; }
.art-body blockquote {
  margin: 24px 0; padding: 8px 24px; border-left: 3px solid var(--gold);
  background: #F8F9F4; border-radius: 0 10px 10px 0;
  color: var(--navy); font-family: var(--serif); font-size: 18px; line-height: 1.8; font-style: italic;
}

/* Images adapt to the viewport instead of importing WeChat's fixed sizes:
   wide photos fill the reading column, tall/portrait shots are capped at a
   share of the viewport height, everything is centred. */
.art-body img {
  display: block; margin: 12px auto;
  width: auto; height: auto;
  max-width: 100%; max-height: 66vh;
  border-radius: 8px;
}
.art-body img[style] {
  width: auto !important; height: auto !important;
  max-width: 100% !important; max-height: 66vh !important;
}
.art-body figure { margin: 22px 0; text-align: center; }
.art-body figure.article-figure { margin: 22px 0; }
.art-body figure.article-figure img { width: auto; max-width: 100%; max-height: 66vh; margin: 0 auto; }
.art-body figure.article-figure figcaption {
  text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 10px;
}
/* Automatic caption: the paragraph typed right below a lone image. */
.art-body p.has-figure { margin: 14px 0 0; text-align: center; }
.art-body p.has-figure img { margin: 0 auto; }
.art-body p.fig-caption {
  text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.65;
  margin: 8px auto 24px; max-width: 82%;
}
@media (max-width: 620px) {
  .art-body img, .art-body img[style] { max-height: 50vh; }
  .art-body figure.article-figure img { max-height: 50vh; }
}
.art-body ul, .art-body ol { margin: 0 0 20px; padding-left: 26px; }
.art-body li { margin: 7px 0; }
.art-body hr { border: none; border-top: 1px solid var(--line); margin: 38px 0; }

.art-source {
  margin-top: 46px; padding: 18px 22px; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.art-source p { margin: 0; font-size: 13px; color: var(--muted); }
.art-source a { font-size: 13.5px; font-weight: 700; color: var(--navy); text-decoration: none; }
.art-source a:hover { color: var(--gold); }

/* responsive public */
@media (max-width: 900px) {
  .arch-feature { grid-template-columns: 1fr; }
  .arch-feature .feature-media { min-height: 0; aspect-ratio: 16 / 9; }
  .arch-feature .feature-body { padding: 22px 22px 24px; }
}
@media (max-width: 620px) {
  .casin-archive { padding: 18px 0 60px; }
  .casin-archive-in { padding: 0 16px; }
  .arch-row { gap: 14px; padding: 16px 16px; }
  .arch-row .row-thumb { width: 96px; }
  .arch-row h3 { font-size: 15.5px; }
  .art { padding: 10px 0 60px; }
  .art-body { font-size: 16.5px; }
}

/* =================================================================== ADMIN */
.casin-admin {
  font-family: var(--sans); color: var(--ink); background: var(--paper); min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.casin-admin * { box-sizing: border-box; }
.casin-admin .topbar {
  background: var(--navy); color: #fff; padding: 14px 26px;
  display: flex; align-items: center; gap: 18px; position: sticky; top: 0; z-index: 20;
}
.casin-admin .topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.casin-admin .topbar .brand .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--gold); color: var(--navy); display: grid; place-items: center; font-family: var(--serif); font-weight: 800; }
.casin-admin .topbar .spacer { flex: 1; }
.casin-admin .topbar a, .casin-admin .topbar button {
  color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; background: transparent; border: 0; cursor: pointer;
}
.casin-admin .topbar a:hover, .casin-admin .topbar button:hover { color: var(--gold-soft); }
.casin-admin .topbar .logout-form { display: inline-flex; align-items: center; margin: 0; }
.casin-admin .wrap { max-width: 1080px; margin: 0 auto; padding: 34px 24px 80px; }
.casin-admin .page-heading { margin-bottom: 26px; }
.casin-admin .page-heading .eyebrow { color: var(--gold); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
.casin-admin .page-heading h1 { font-family: var(--serif); color: var(--navy); font-size: 32px; margin: 6px 0 8px; }
.casin-admin .page-heading p { color: var(--muted); margin: 0; }

/* dashboard stats */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 26px;
}
.stat-card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px;
}
.stat-card .label { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.stat-card .value { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--navy); margin-top: 6px; }
.stat-card .value small { font-size: 14px; color: var(--muted); font-family: var(--sans); font-weight: 600; }

/* toolbar above the table */
.casin-admin .toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.casin-admin .toolbar .search {
  flex: 1; min-width: 220px; max-width: 380px; position: relative;
}
.casin-admin .toolbar .search input {
  width: 100%; padding: 11px 14px 11px 38px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 14px; font-family: var(--sans); color: var(--ink); background: #fff;
}
.casin-admin .toolbar .search::before {
  content: "⌕"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 17px;
}
.casin-admin .toolbar .spacer { flex: 1; }

/* --- workbench chrome ----------------------------------------------------- */
.casin-admin .topbar .whoami {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.8);
}
.casin-admin .topbar .whoami .role {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.16); color: #fff; padding: 2px 7px; border-radius: 999px;
}
.casin-admin .langswitch { display: inline-flex; gap: 4px; margin-right: 4px; }
.casin-admin .langswitch form { display: inline-flex; margin: 0; }
.casin-admin .langswitch button {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.75); background: transparent;
}
.casin-admin .langswitch button.on { background: var(--gold); border-color: var(--gold); color: #fff; }

.heading-row { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.heading-row > div:first-child { flex: 1; min-width: 260px; }
.casin-admin .page-heading h1 { margin: 6px 0 8px; }

.casin-admin .btn.lg { padding: 13px 26px; font-size: 15px; }
.casin-admin .btn.tiny { padding: 4px 9px; font-size: 11.5px; border-radius: 7px; }
.casin-admin .btn.block { display: flex; justify-content: center; width: 100%; }
.casin-admin .panel.flat { padding: 0; overflow: hidden; }
.casin-admin .panel.side-card { padding: 18px 18px 20px; }
.casin-admin .panel.side-card h3 {
  margin: 0 0 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-family: var(--sans);
}
.ta-r { text-align: right !important; }
.casin-admin .inline-form { display: inline-flex; margin: 0; }
.casin-admin table.media-table tr.is-draft td { background: #FDFBF5; }
.casin-admin .row-text-main { display: flex; flex-direction: column; min-width: 0; }
.pin-badge {
  display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700;
  color: var(--navy); background: var(--gold-soft); padding: 2px 8px; border-radius: 999px;
  vertical-align: middle;
}
.req { color: #C0392B; }
.casin-admin .check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); }
.casin-admin .check input { width: 16px; height: 16px; }

.toolbar .chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip {
  text-decoration: none; font-size: 13px; font-weight: 600; color: var(--navy);
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* editor layout: body on the left, publishing controls on the right */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.editor-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.editor-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
.editor-side .panel { margin-bottom: 0; }
.side-card .cover-preview { width: 100%; margin-bottom: 10px; display: block; }
.side-card input[type=file] { font-size: 12px; }
.sticky-actions { display: flex; flex-direction: column; gap: 8px; }
.lib-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.lib-head h3 { margin: 0; font-size: 14px; color: var(--navy); }
.lib-head .hint { margin: 0; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.lib-item {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
}
.lib-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #EAE6DA; }
.lib-actions { display: flex; gap: 6px; padding: 7px; }
.lib-actions .btn { flex: 1; justify-content: center; }

@media (max-width: 980px) {
  .editor-layout { grid-template-columns: 1fr; }
  .editor-side { position: static; }
}

.casin-admin .panel { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 18px; }
.casin-admin .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.casin-admin .btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--navy); color: #fff; border: 0; border-radius: 10px;
  padding: 11px 20px; font-size: 14px; font-weight: 600; text-decoration: none; transition: .15s;
}
.casin-admin .btn:hover { background: var(--navy-soft); }
.casin-admin .btn.gold { background: var(--gold); color: var(--navy); }
.casin-admin .btn.ghost { background: transparent; color: var(--navy); border: 1px solid var(--line); }
.casin-admin .btn.danger { background: #B23B3B; }
.casin-admin .btn.small { padding: 7px 13px; font-size: 13px; }

.casin-admin .field { margin-bottom: 16px; }
.casin-admin .field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 7px; }
.casin-admin .field input[type=text], .casin-admin .field input[type=date], .casin-admin .field select,
.casin-admin .field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; font-family: var(--sans); color: var(--ink); background: #fff;
}
.casin-admin .field .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.casin-admin .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .casin-admin .grid-2 { grid-template-columns: 1fr; } }
.casin-admin .cover-row { display: flex; gap: 18px; align-items: flex-start; }
.casin-admin .cover-preview { width: 200px; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #EAE6DA; flex-shrink: 0; }
.casin-admin .cover-preview img { width: 100%; height: 100%; object-fit: cover; }

/* WeChat-like editor frame */
.casin-admin .editor-frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.casin-admin .editor-frame .editor-bar { background: var(--paper); border-bottom: 1px solid var(--line); padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.casin-admin .editor-frame .editor-bar .ttl { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 15px; }
.casin-admin .editor-frame .editor-bar .spacer { flex: 1; }
.casin-admin .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--line); }
.casin-admin .ql-container.ql-snow { border: 0; font-family: var(--sans); font-size: 16px; }
.casin-admin .ql-editor { min-height: 460px; line-height: 1.9; color: #2A3947; font-size: 16.5px; }
.casin-admin .ql-editor.ql-blank::before { color: #9aa6b2; font-style: normal; }
.casin-admin .ql-snow.ql-toolbar button.ql-divider { display: inline-flex; align-items: center; justify-content: center; }
.casin-admin .ql-snow.ql-toolbar button.ql-divider::after {
  content: ""; display: block; width: 16px; height: 7px; box-sizing: border-box;
  border-top: 2px solid #444; border-bottom: 2px solid #444;
}
.casin-admin .ql-editor hr { border: 0; border-top: 1px solid #d8d8d8; margin: 22px 0; }

.casin-admin table.media-table { width: 100%; border-collapse: collapse; background: var(--paper-2); border-radius: 14px; overflow: hidden; }
.casin-admin table.media-table th, .casin-admin table.media-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.casin-admin table.media-table th { background: var(--paper); color: var(--navy); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.casin-admin table.media-table tr:last-child td { border-bottom: 0; }
.casin-admin table.media-table tbody tr:hover { background: #F8F9F4; }
.casin-admin .row-title { display: flex; align-items: center; gap: 12px; }
.casin-admin .row-thumb-sm {
  width: 52px; height: 38px; border-radius: 7px; overflow: hidden; background: #EAE6DA; flex-shrink: 0;
}
.casin-admin .row-thumb-sm img { width: 100%; height: 100%; object-fit: cover; }
.casin-admin .row-title .t { color: var(--navy); font-weight: 600; }
.casin-admin .row-title .slug { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.casin-admin .status-pill { font-size: 12px; padding: 4px 11px; border-radius: 999px; font-weight: 700; }
.casin-admin .status-pill.published { background: #E4F1E6; color: #2E7D4F; }
.casin-admin .status-pill.draft { background: #FCEDE4; color: #B94A20; }
.casin-admin .row-actions a, .casin-admin .row-actions button { margin-right: 8px; }

.casin-admin .upload-hint { font-size: 12px; color: var(--muted); }
.casin-admin .flash-stack { padding: 0 24px; }
.casin-admin .flash {
  max-width: 1080px; margin: 16px auto 0; padding: 12px 18px; border-radius: 10px;
  background: #E4F1E6; color: #2E7D4F; font-size: 14px; font-weight: 600;
}

@media (max-width: 720px) {
  .casin-admin table.media-table th:nth-child(3),
  .casin-admin table.media-table td:nth-child(3) { display: none; }
}

/* =========================================================================
   ADMIN — CASIN site design language
   Same palette and type as the public site (navy / gold / warm paper,
   Noto Serif display type, soft-rounded cards) so the workbench reads as
   part of casin.work.
   ========================================================================= */
.casin-admin {
  --c-ink: #333B36; --c-muted: #6B7570; --c-paper: #FBFAF7; --c-line: #E5E3DA;
  --c-navy: #E56028; --c-navy-soft: #C24B1C; --c-gold: #E56028; --c-gold-dark: #A78517;
  --c-danger: #B23B3B;
  --c-shadow: 0 16px 40px -22px rgba(51, 59, 54, .35);
  background: var(--c-paper); color: var(--c-ink);
  font-family: var(--sans);
}
.casin-admin h1, .casin-admin h2, .casin-admin h3 {
  font-family: var(--serif); font-weight: 700; color: var(--c-navy);
}

/* top bar — official emblem on an off-white band, orange as the brand accent */
.casin-admin .topbar {
  background: var(--c-paper); border-bottom: 3px solid var(--c-gold);
  min-height: 68px; padding: 0 26px; color: var(--c-ink);
}
.casin-admin .topbar .brand { gap: 14px; }
.casin-admin .topbar .brand-emblem { height: 46px; width: auto; display: block; }
.casin-admin .topbar .brand-copy { display: flex; flex-direction: column; line-height: 1.25; }
.casin-admin .topbar .brand-copy strong {
  font-family: var(--serif); font-weight: 700; font-size: 16.5px;
  color: var(--c-gold); letter-spacing: .14em;
}
.casin-admin .topbar .brand-copy span {
  font-size: 10.5px; letter-spacing: .1em; color: var(--c-muted);
}
.casin-admin .topbar a, .casin-admin .topbar button { color: var(--c-ink); font-size: 13.5px; }
.casin-admin .topbar a:hover, .casin-admin .topbar button:hover { color: var(--c-gold); }
.casin-admin .topbar .whoami { color: var(--c-muted); }
.casin-admin .topbar .whoami .role { background: rgba(229, 96, 40, .12); color: var(--c-gold); }
.casin-admin .langswitch button { background: transparent; border: 1px solid var(--c-line); color: var(--c-ink); }
.casin-admin .langswitch button.on { background: var(--c-gold); border-color: var(--c-gold); color: #fff; }

/* panels, stats, wrap */
.casin-admin .wrap { max-width: 1180px; padding: 34px 20px 80px; }
.casin-admin .panel {
  background: #fff; border: 1px solid var(--c-line); box-shadow: var(--c-shadow); border-radius: 14px;
}
.stat-card { background: #fff; border: 1px solid var(--c-line); box-shadow: var(--c-shadow); border-radius: 14px; }
.stat-card .label { color: var(--c-muted); }
.stat-card .value { font-family: var(--serif); font-weight: 700; color: var(--c-navy); }
.edit-topline { display: flex; margin-bottom: 16px; }

/* buttons — navy primary, gold emphasis */
.casin-admin .btn {
  background: var(--c-navy); border: 1px solid var(--c-navy); color: #fff;
  border-radius: 10px; font-size: 13.5px; font-weight: 650;
}
.casin-admin .btn:hover { background: var(--c-navy-soft); border-color: var(--c-navy-soft); }
.casin-admin .btn.gold { background: var(--c-gold); border-color: var(--c-gold); color: #fff; }
.casin-admin .btn.gold:hover { background: #C24B1C; border-color: #C24B1C; color: #fff; }
.casin-admin .btn.ghost { background: #fff; border: 1px solid var(--c-line); color: var(--c-navy); }
.casin-admin .btn.ghost:hover { background: #F8F9F4; border-color: var(--c-gold); color: var(--c-gold-dark); }
.casin-admin .btn.danger { background: var(--c-danger); border-color: var(--c-danger); }
.casin-admin .btn.danger:hover { background: #932f2f; border-color: #932f2f; }

/* toolbar, chips, search */
.casin-admin .toolbar .search input {
  border: 1px solid var(--c-line); border-radius: 10px; background: #fff; color: var(--c-ink);
}
.casin-admin .toolbar .search input:focus { outline: 2px solid rgba(229, 96, 40, .35); outline-offset: 0; }
.chip { border: 1px solid var(--c-line); background: #fff; color: var(--c-navy); border-radius: 999px; }
.chip:hover { border-color: var(--c-gold); color: var(--c-gold-dark); }
.chip.on { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }

/* table */
.casin-admin table.media-table { border: 1px solid var(--c-line); border-radius: 14px; }
.casin-admin table.media-table th {
  background: var(--c-paper); color: var(--c-navy); text-transform: none; letter-spacing: .02em;
}
.casin-admin table.media-table tbody tr:hover { background: #F8F9F4; }
.casin-admin .row-title .t { color: var(--c-navy); }
.pin-badge { background: #FCEDE4; color: #B94A20; border: 1px solid #F3D6CA; }
.status-pill.published { background: #E4F1E6; color: #2E7D4F; }
.status-pill.draft { background: #FCEDE4; color: #B94A20; }

/* editor — wysiwyg: the editing surface uses the public article typography */
.casin-admin .editor-frame { border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--c-shadow); }
.casin-admin .editor-frame .editor-bar { background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.casin-admin .field label { color: var(--c-navy); }
.casin-admin .field input[type=text], .casin-admin .field input[type=date],
.casin-admin .field select, .casin-admin .field textarea {
  border: 1px solid var(--c-line); border-radius: 10px; background: #fff; color: var(--c-ink);
}
.casin-admin .field input:focus, .casin-admin .field select:focus, .casin-admin .field textarea:focus {
  outline: 2px solid rgba(229, 96, 40, .35); outline-offset: 0;
}
.casin-admin .cover-preview { border: 1px solid var(--c-line); border-radius: 12px; }
.casin-admin .lib-item { border: 1px solid var(--c-line); border-radius: 10px; }
.casin-admin .lib-item img { border-radius: 0; }

/* the editor body mirrors the public article exactly */
.casin-admin .ql-editor { font-size: 17px; line-height: 1.9; color: #2A3947;
  font-family: var(--sans); }
.casin-admin .ql-editor p { margin: 0 0 16px; }
.casin-admin .ql-editor h2, .casin-admin .ql-editor h3 {
  font-family: var(--serif); color: var(--c-navy);
  line-height: 1.4; margin: 30px 0 14px; font-weight: 700;
}
.casin-admin .ql-editor h2 { font-size: 23px; }
.casin-admin .ql-editor h3 { font-size: 19px; }
.casin-admin .ql-editor a { color: var(--c-navy-soft); text-decoration: underline; text-underline-offset: 3px; }
.casin-admin .ql-editor strong { color: var(--c-navy); }
.casin-admin .ql-editor blockquote {
  margin: 20px 0; padding: 8px 22px; border-left: 3px solid var(--c-gold);
  background: #F8F9F4; border-radius: 0 10px 10px 0;
  color: var(--c-navy); font-family: var(--serif);
  font-size: 17px; line-height: 1.8; font-style: italic;
}
.casin-admin .ql-editor img { display: block; margin: 12px auto; max-width: 100%; max-height: 380px;
  width: auto; height: auto; border-radius: 10px; }
.casin-admin .ql-editor ol, .casin-admin .ql-editor ul { margin: 0 0 16px; padding-left: 26px; }
.casin-admin .ql-editor li { margin: 6px 0; }
.casin-admin .ql-editor hr { border: 0; border-top: 1px solid var(--c-line); margin: 30px 0; }
.casin-admin .ql-editor p.has-figure { margin: 10px 0 0; text-align: center; }
.casin-admin .ql-editor p.has-figure img { margin: 0 auto; }
.casin-admin .ql-editor p.fig-caption {
  text-align: center; color: #96A2AE; font-size: 13px; line-height: 1.6;
  margin: 6px auto 22px; max-width: 82%;
}

/* flash */
.casin-admin .flash {
  background: #E4F1E6; color: #2E7D4F; border: 1px solid #CDE3D2; border-radius: 10px;
  box-shadow: none;
}

/* Native podcast players — replace the dead Wix music widgets on the home
   page so playback actually works. */
.casin-audio {
  display: flex; gap: 14px; align-items: center; width: min(660px, 92%);
  box-sizing: border-box; flex-shrink: 0;
  margin: 14px auto; padding: 12px 16px; background: #191919; border-radius: 12px;
}
.casin-audio-cover {
  flex: none; width: 64px; height: 64px; border-radius: 8px;
  background-size: cover; background-position: center;
}
.casin-audio-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.casin-audio-title { color: #fff; font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.casin-audio audio { width: 100%; min-width: 0; height: 40px; display: block; color-scheme: light; }
.casin-audio-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.casin-audio-status { flex: 1 1 160px; color: #D5D5D5; font-size: 12px; line-height: 1.5; }
.casin-audio-link, .casin-audio-retry { color: #F3743C; font-size: 12px; font-weight: 650; text-decoration: none; }
.casin-audio-link:hover { text-decoration: underline; }
.casin-audio-retry { padding: 2px 6px; background: transparent; border: 1px solid currentColor; border-radius: 4px; cursor: pointer; }
.casin-audio-retry[hidden] { display: none; }
.casin-audio-link:focus-visible, .casin-audio-retry:focus-visible { outline: 2px solid #F3743C; outline-offset: 3px; }
@media (max-width: 600px) {
  .casin-audio { align-items: flex-start; gap: 10px; padding: 14px 12px; }
  .casin-audio-cover { width: 40px; height: 40px; }
  .casin-audio-title { font-size: 14px; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .casin-audio-cover { display: none; }
}