/* Admin panel. A deliberate light workspace, separate from the dark app. */
.adm { --a-bg: #f4f2ec; --a-card: #ffffff; --a-ink: #16201c; --a-mute: #5d6b65; --a-line: #dcd8cc; --a-green: #0b2a23; --a-gold: #d9ab67; --a-gold-d: #a9772f; --a-ok: #1f7a46; --a-warn: #a36200; --a-bad: #b3261e;
  position: fixed; inset: 0; z-index: 200; display: flex; background: var(--a-bg); color: var(--a-ink); font: 14px/1.45 var(--font-ui); overflow: hidden; color-scheme: light; }
.adm[hidden] { display: none; }
.adm * { box-sizing: border-box; }
.adm h1, .adm h2 { margin: 0; }
.adm .icon { width: 18px; height: 18px; flex: none; }

.adm .side { flex: none; width: 232px; display: flex; flex-direction: column; gap: 18px; padding: 18px 12px; background: var(--a-green); color: #f3f0e7; overflow-y: auto; }
.adm .brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.adm .brand b { display: block; font-size: 14px; }
.adm .brand small { color: #9bb5ab; font-size: 11px; }
.adm .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--a-gold); color: var(--a-green); font-weight: 800; }
.adm nav { display: grid; gap: 2px; }
.adm nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: #cfdcd6; text-decoration: none; font-weight: 500; }
.adm nav a:hover { background: rgba(255, 255, 255, .07); }
.adm nav a.on { background: var(--a-gold); color: var(--a-green); font-weight: 700; }
.adm .acct { margin-top: auto; display: grid; gap: 2px; padding: 12px 8px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.adm .acct small { color: #9bb5ab; margin-bottom: 6px; }
.adm .linkb { display: block; padding: 4px 0; color: var(--a-gold-d); font-size: 13px; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.adm .side .linkb { color: var(--a-gold); }

.adm .main { flex: 1; min-width: 0; overflow-y: auto; padding: 22px 28px 40px; }
.adm .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.adm .top h1 { font-size: 22px; }
.adm .sync { margin-bottom: 16px; padding: 9px 12px; border-radius: 9px; font-size: 12px; }
.adm .sync.live { background: #e2f1e8; color: var(--a-ok); }
.adm .sync.local { background: #fbefd5; color: var(--a-warn); }

.adm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 1px solid var(--a-line); border-radius: 9px; background: var(--a-card); color: var(--a-ink); font: inherit; font-weight: 700; cursor: pointer; }
.adm .btn:hover { border-color: var(--a-gold-d); }
.adm .btn.primary { background: var(--a-green); border-color: var(--a-green); color: #fff; }
.adm .btn.primary:hover { background: #12453a; }
.adm .btn.danger { background: var(--a-bad); border-color: var(--a-bad); color: #fff; }
.adm .btn.ghost { color: var(--a-bad); }
.adm .btn.small { min-height: 30px; padding: 0 11px; font-size: 12px; }
.adm .btn.block { width: 100%; }
.adm .btn:disabled, .adm .ib:disabled { opacity: .45; cursor: default; }
.adm .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.adm .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.adm .stat { padding: 14px 16px; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-card); }
.adm .stat small { display: block; color: var(--a-mute); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.adm .stat b { display: block; margin: 4px 0 2px; font-size: 26px; }
.adm .stat span { color: var(--a-mute); font-size: 12px; }
.adm .two { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
.adm .box { min-width: 0; padding: 16px; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-card); overflow-x: auto; }
.adm .box h2 { margin-bottom: 10px; font-size: 15px; }
.adm table { width: 100%; border-collapse: collapse; }
.adm th { padding: 8px 10px; border-bottom: 1px solid var(--a-line); color: var(--a-mute); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.adm td { padding: 10px; border-bottom: 1px solid #efece2; vertical-align: middle; }
.adm td small { display: block; color: var(--a-mute); }
.adm tr:last-child td { border-bottom: 0; }
.adm .feed { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.adm .feed small { display: block; color: var(--a-mute); }
.adm .empty { padding: 20px; color: var(--a-mute); text-align: center; }
.adm .thumb { display: block; width: 44px; height: 55px; border-radius: 6px; object-fit: cover; }
.adm .tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.adm .tag.ok { background: #e2f1e8; color: var(--a-ok); }
.adm .tag.warn { background: #fbefd5; color: var(--a-warn); }
.adm .tag.off { background: #ece9df; color: var(--a-mute); }
.adm .ord { white-space: nowrap; }
.adm .ib { width: 26px; height: 26px; border: 1px solid var(--a-line); border-radius: 6px; background: var(--a-card); color: var(--a-mute); font-size: 10px; cursor: pointer; }
.adm .rowact { white-space: nowrap; text-align: right; }
.adm .rowact .btn + .btn, .adm .confirm .btn { margin-left: 6px; }

.adm .f { display: block; margin-bottom: 12px; }
.adm .f > span { display: block; margin-bottom: 4px; color: var(--a-mute); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.adm input:not([type="checkbox"]), .adm select, .adm textarea { width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid var(--a-line); border-radius: 9px; background: #fff; color: var(--a-ink); font: inherit; }
.adm input:focus-visible, .adm select:focus-visible, .adm textarea:focus-visible, .adm .btn:focus-visible { outline: 2px solid var(--a-gold-d); outline-offset: 1px; }
.adm input.otp { text-align: center; font-size: 22px; letter-spacing: .5em; }
.adm .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adm .chk { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-weight: 600; }
.adm .note { margin: 4px 0 10px; color: var(--a-mute); font-size: 12px; }
.adm .err { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #fbe4e1; color: var(--a-bad); font-size: 13px; }
.adm .err[hidden] { display: none; }

.adm .hero-ed { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.adm .phone { width: 260px; max-width: 100%; margin: 0 auto 8px; overflow: hidden; border: 6px solid #1b1919; border-radius: 28px; background: var(--a-green); }
.adm .hp-art { position: relative; display: grid; place-items: end start; height: 190px; background: #13483b center / cover no-repeat; }
.adm .hp-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #9bb5ab; font-size: 12px; text-align: center; }
.adm .hp-promo { position: relative; display: grid; gap: 3px; padding: 12px; color: #fff; }
.adm .hp-promo b { font-size: 15px; }
.adm .hp-promo span { font-size: 11px; }
.adm .hp-promo i { justify-self: start; margin-top: 3px; padding: 4px 10px; border-radius: 999px; background: var(--a-gold); color: var(--a-green); font-size: 10px; font-style: normal; font-weight: 800; }
.adm .hp-panel { padding: 16px 12px; color: #9bb5ab; font-size: 11px; text-align: center; }

.adm .modal { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(10, 24, 20, .55); overflow-y: auto; }
.adm .sheet { width: min(560px, 100%); max-height: 100%; overflow-y: auto; padding: 20px; border-radius: 14px; background: var(--a-card); }
.adm .sheet h2 { margin-bottom: 14px; font-size: 18px; }
.adm .flyer-prev { display: block; width: 120px; margin-bottom: 6px; border-radius: 8px; }
.adm .flyer-prev[hidden] { display: none; }

.adm .login { flex: 1; display: grid; place-items: center; padding: 16px; background: radial-gradient(100% 70% at 50% 0, #14493c, var(--a-green)); overflow-y: auto; }
.adm .login-card { width: min(380px, 100%); padding: 26px 24px; border-radius: 16px; background: var(--a-card); }
.adm .login-card .brand-mark { margin-bottom: 14px; }
.adm .login-card h1 { font-size: 22px; }
.adm .lead { margin: 4px 0 18px; color: var(--a-mute); }

@media (max-width: 860px) {
  .adm { flex-direction: column; }
  .adm .side { width: auto; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; overflow-x: auto; }
  .adm .brand small, .adm .acct small { display: none; }
  .adm .acct { margin: 0 0 0 auto; padding: 0; border: 0; grid-auto-flow: column; align-items: center; gap: 10px; white-space: nowrap; }
  .adm nav { display: flex; }
  .adm nav a { padding: 8px 10px; white-space: nowrap; }
  .adm nav a span { font-size: 12px; }
  .adm .main { padding: 16px 16px 40px; }
  .adm .two, .adm .hero-ed, .adm .row2 { grid-template-columns: 1fr; }
}
.adm table, .adm td, .adm th { color: var(--a-ink); }
.adm th { color: var(--a-mute); }
.adm .btn { text-transform: none; letter-spacing: 0; }
.adm .btn.primary { color: #fff; }
.adm .btn.danger { color: #fff; }
.adm .btn.ghost { color: var(--a-bad); }
.adm .acct b { font-size: 13px; }

.adm .side nav em { display: block; margin: 12px 12px 4px; color: #7e9a8f; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.adm .thumb.sq { width: 52px; height: 52px; }
.adm .imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.adm .im { position: relative; }
.adm .im img { display: block; width: 84px; height: 56px; border-radius: 6px; object-fit: cover; }
.adm .im .ib { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background: #fff; }
.adm .box + .box { margin-top: 16px; }
.adm .tabs2 { display: flex; gap: 6px; margin-bottom: 14px; }
.adm .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.adm .toolbar input, .adm .toolbar select { width: auto; min-width: 180px; }
.adm .toolbar .grow { flex: 1; }
.adm td.num, .adm th.num { text-align: right; font-variant-numeric: tabular-nums; }
.adm .mono { font-variant-numeric: tabular-nums; }
.adm .tiny { font-size: 11px; color: var(--a-mute); }
.adm .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px) { .adm .grid3 { grid-template-columns: 1fr; } .adm .side nav em { display: none; } }

.adm .kv { margin: 0; display: grid; gap: 8px; }
.adm .kv > div { display: grid; grid-template-columns: 38% 1fr; gap: 10px; }
.adm .kv dt { color: var(--a-mute); font-size: 12px; font-weight: 700; }
.adm .kv dd { margin: 0; overflow-wrap: anywhere; }
.adm td input[type="time"], .adm td input[type="date"] { min-width: 120px; }

.adm details.tr { margin: 4px 0 12px; padding: 8px 10px; border: 1px solid var(--a-line); border-radius: 9px; }
.adm details.tr summary { cursor: pointer; font-weight: 700; }
.adm .modal .sheet .f.wide { grid-column: 1 / -1; }

/* Connections */
.adm .cx { display: grid; gap: 12px; margin-bottom: 16px; }
.adm .cx header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm .cx header h2 { margin: 0 auto 0 0; }
.adm .cx-sum { margin: 0; color: var(--a-mute, #5b6b66); font-size: 13px; }
.adm .cx details > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.adm .cx details ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.adm .cx-hook { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px dashed var(--a-line); border-radius: 10px; font-size: 13px; }
.adm .cx-hook code { min-width: 0; overflow-wrap: anywhere; }
.adm .cx-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.adm .cx-form { display: grid; gap: 10px; }
.adm .cx-form .f small { color: var(--a-mute, #5b6b66); font-size: 12px; }
.adm .cx-form textarea { font-family: ui-monospace, monospace; font-size: 12px; }
.adm .cx-msg { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.adm .cx-msg.ok, .adm .cx-last.ok { color: var(--a-ok); }
.adm .cx-msg.bad, .adm .cx-last.bad { color: #b3261e; }
.adm .cx-msg.warn { background: #fbefd5; color: var(--a-warn); }
.adm .cx-last { margin: 0; font-size: 12px; }
.adm .cx-log details { padding: 8px 0; border-top: 1px solid var(--a-line); font-size: 13px; }
.adm .cx-log pre { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.adm .tag.bad { background: #f7dcd9; color: #b3261e; }