/* Admin panel */
:root { --a-bg: #F3F5F9; --a-side: #0B1F3A; --a-ink: #0B1F3A; --a-mute: #6B7A94; --a-line: #D7DEE8; --a-accent: #1F4FD8; --a-flare: #FF5C35; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: 'Nunito', system-ui, sans-serif; background: var(--a-bg); color: var(--a-ink); font-size: 14.5px; line-height: 1.5; }
a { color: var(--a-accent); text-decoration: none; }
h1, h2, h3 { font-family: 'Nunito', sans-serif; letter-spacing: -0.01em; margin: 0 0 .6em; }
h1 { font-size: 1.6rem; }
.admin { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.side { background: var(--a-side); color: #fff; padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.side .brand { color: #fff; font-family: 'Nunito', sans-serif; font-weight: 700; display: flex; gap: .5rem; align-items: center; padding: .4rem .6rem 1.2rem; }
.side .brand i { width: 26px; height: 26px; border-radius: 7px; background: var(--a-accent); display: inline-block; }
.side a.item { color: rgba(255,255,255,.78); padding: .6rem .7rem; border-radius: 8px; display: flex; gap: .6rem; align-items: center; font-size: .92rem; }
.side a.item svg { width: 18px; height: 18px; }
.side a.item:hover { background: rgba(255,255,255,.08); color: #fff; }
.side a.item.is-active { background: var(--a-accent); color: #fff; }
.side .group { font-size: .72rem; color: rgba(255,255,255,.45); padding: .9rem .7rem .3rem; text-transform: none; }
.side .foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: rgba(255,255,255,.7); }
.side .foot form { margin-top: .5rem; }
.main { padding: 1.6rem 2rem 3rem; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 8px; border: 1px solid transparent; background: var(--a-accent); color: #fff; font: 700 .88rem 'Nunito', sans-serif; cursor: pointer; }
.btn:hover { filter: brightness(.95); }
.btn.ghost { background: #fff; color: var(--a-ink); border-color: var(--a-line); }
.btn.danger { background: #fff; color: #B91C1C; border-color: #FECACA; }
.btn.sm { padding: .35rem .7rem; font-size: .8rem; }
.btn.flare { background: var(--a-flare); }
.card { background: #fff; border: 1px solid var(--a-line); border-radius: 12px; padding: 1.3rem; margin-bottom: 1.2rem; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
.stat { background: #fff; border: 1px solid var(--a-line); border-radius: 12px; padding: 1rem 1.2rem; }
.stat b { display: block; font: 800 1.9rem 'Nunito', sans-serif; }
.stat span { color: var(--a-mute); font-size: .85rem; }
.stat.hot { border-color: var(--a-flare); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .65rem .6rem; border-bottom: 1px solid var(--a-line); vertical-align: top; }
th { color: var(--a-mute); font-weight: 500; font-size: .8rem; }
tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.pill { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #E2E8F0; color: #334155; }
.pill.pending { background: #FFEDD5; color: #9A3412; }
.pill.contacted { background: #DBEAFE; color: #1E40AF; }
.pill.done { background: #DCFCE7; color: #166534; }
.pill.cancelled { background: #F1F5F9; color: #64748B; }
.pill.off { background: #FEE2E2; color: #991B1B; }
.pill.on { background: #DCFCE7; color: #166534; }
.field { display: grid; gap: .3rem; margin-bottom: .9rem; }
.field label { font-size: .82rem; font-weight: 500; color: #334155; }
.field input, .field select, .field textarea { font: inherit; padding: .55rem .7rem; border: 1px solid var(--a-line); border-radius: 8px; width: 100%; background: #fff; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--a-accent); border-color: var(--a-accent); }
.field .hint { font-size: .76rem; color: var(--a-mute); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1.2rem; }
.lang-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.lang-cols > div { background: #F8FAFC; border: 1px solid var(--a-line); border-radius: 10px; padding: 1rem; }
.lang-cols h3 { font-size: .95rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin-bottom: .9rem; }
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.flash.success { background: #DCFCE7; color: #166534; }
.flash.error { background: #FEE2E2; color: #991B1B; }
.actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.actions form { display: inline; }
.filters { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filters a { padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--a-line); background: #fff; color: var(--a-ink); font-size: .82rem; }
.filters a.is-active { background: var(--a-ink); color: #fff; border-color: var(--a-ink); }
.inline-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.inline-form select, .inline-form input { font: inherit; padding: .35rem .5rem; border: 1px solid var(--a-line); border-radius: 6px; font-size: .82rem; }
.muted { color: var(--a-mute); font-size: .82rem; }
details summary { cursor: pointer; font-weight: 500; }
.menu-btn { display: none; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--a-line); border-radius: 14px; padding: 2rem; }
.login-card .brand { font: 800 1.2rem 'Nunito', sans-serif; display: flex; gap: .5rem; align-items: center; margin-bottom: 1.2rem; }
.login-card .brand i { width: 28px; height: 28px; border-radius: 8px; background: var(--a-accent); display: inline-block; }
.login-card .btn { width: 100%; justify-content: center; padding: .75rem; }
@media (max-width: 860px) {
  .admin { grid-template-columns: 1fr; }
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; padding: .6rem .8rem; gap: .3rem; }
  .side .brand { padding: .3rem .4rem; width: 100%; }
  .side .group { display: none; }
  .side a.item { padding: .4rem .6rem; font-size: .82rem; }
  .side .foot { margin: 0 0 0 auto; padding: 0; border: 0; }
  .side .foot span { display: none; }
  .main { padding: 1.2rem 1rem 2.5rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .two, .three, .lang-cols { grid-template-columns: 1fr; }
}

/* Live chat admin */
.chat-admin { display: grid; grid-template-columns: 300px 1fr; gap: 1.2rem; align-items: start; }
.chat-list { padding: .6rem; max-height: 75vh; overflow-y: auto; }
.chat-item { display: grid; gap: .15rem; padding: .7rem .8rem; border-radius: 10px; color: var(--a-ink); position: relative; }
.chat-item:hover { background: #F1F5F9; } .chat-item.is-active { background: #E3EAFB; }
.chat-item .pill { position: absolute; right: .7rem; top: .7rem; }
.chat-item .muted { font-size: .75rem; }
.chat-view { display: flex; flex-direction: column; min-height: 60vh; padding: 1rem; }
.chat-view-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding-bottom: .8rem; border-bottom: 1px solid var(--a-line); margin-bottom: .8rem; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .7rem; padding: .5rem; background: #F8FAFC; border-radius: 10px; max-height: 55vh; }
.chat-msg { max-width: 75%; display: flex; flex-direction: column; gap: .15rem; }
.chat-msg.is-admin { align-self: flex-end; align-items: flex-end; }
.chat-who { font-size: .72rem; color: var(--a-mute); }
.chat-bubble { padding: .55rem .8rem; border-radius: 12px; background: #fff; border: 1px solid var(--a-line); white-space: pre-wrap; word-break: break-word; }
.chat-msg.is-admin .chat-bubble { background: var(--a-accent); color: #fff; border-color: var(--a-accent); }
.chat-msg.is-bot .chat-bubble { background: #E3EAFB; border-color: transparent; }
.chat-compose { display: flex; gap: .5rem; margin-top: .8rem; }
.chat-compose input { flex: 1; font: inherit; padding: .6rem .8rem; border: 1px solid var(--a-line); border-radius: 999px; }
@media (max-width: 860px) { .chat-admin { grid-template-columns: 1fr; } }

/* Sales module */
.totals-box { margin-top: .8rem; margin-left: auto; max-width: 360px; display: grid; gap: .3rem; }
.totals-box div { display: flex; justify-content: space-between; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--a-line); }
.totals-box .grand { border-bottom: 0; font-size: 1.1rem; }
.totals-box .grand b { color: var(--a-accent); }
.doc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--a-line); }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.file-card { border: 1px solid var(--a-line); border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.file-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.file-ico { aspect-ratio: 4/3; display: grid; place-items: center; background: #FEE2E2; color: #991B1B; font: 800 1.2rem 'Nunito', sans-serif; }
.file-meta { padding: .5rem .6rem; font-size: .8rem; display: grid; gap: .1rem; }
.file-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card .actions { padding: 0 .5rem .5rem; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 0 .2rem; border-bottom: 1px solid var(--a-line); }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; font-size: .68rem; color: var(--a-mute); }
.bar-pair { display: flex; gap: 2px; align-items: flex-end; height: 130px; width: 100%; }
.bar-pair i { flex: 1; display: block; border-radius: 3px 3px 0 0; min-height: 2px; }
.b1 { background: #93A8E8; } .b2 { background: var(--a-accent); }
.legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }

/* Calendar */
.pill.kind-simple { background: #FEF3C7; color: #92400E; border: 1px dashed #F59E0B; }
.pill.kind-full { background: #E3EAFB; color: #1E3A8A; }
.legend-bar { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; font-size: .82rem; margin-bottom: .8rem; color: var(--a-mute); }
.legend-bar i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: .2rem; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head { font-size: .78rem; font-weight: 700; color: var(--a-mute); text-align: center; padding: .3rem 0; }
.cal-cell { min-width: 0; background: #fff; border: 1px solid var(--a-line); border-radius: 10px; min-height: 108px; padding: .35rem; display: flex; flex-direction: column; gap: 3px; }
.cal-cell.is-empty { background: transparent; border-color: transparent; }
.cal-cell.is-today { border-color: var(--a-accent); box-shadow: 0 0 0 2px #E3EAFB; }
.cal-day { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 700; color: var(--a-ink); }
.cal-add { border: 0; background: var(--a-bg); color: var(--a-mute); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: .9rem; line-height: 1; opacity: 0; }
.cal-cell:hover .cal-add { opacity: 1; }
.ev { display: block; width: 100%; text-align: left; border: 0; color: #fff; font: inherit; font-size: .72rem; line-height: 1.25; padding: .2rem .4rem; border-radius: 5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.ev:hover { filter: brightness(1.08); }
.ev.is-simple { outline: 2px dashed rgba(255,255,255,.9); outline-offset: -3px; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(11,31,58,.5); }
.modal-card { position: relative; width: 100%; background: #fff; border-radius: 14px; padding: 1.5rem; box-shadow: 0 30px 60px -20px rgba(11,31,58,.5); max-height: 92vh; overflow-y: auto; }
.modal-close { position: absolute; top: .7rem; right: .7rem; background: var(--a-bg); border: 0; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1.1rem; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--a-line); cursor: pointer; }
@media (max-width: 860px) { .cal { gap: 2px; } .cal-cell { min-height: 70px; padding: .2rem; } .ev { font-size: .62rem; padding: .1rem .25rem; } .cal-add { opacity: 1; } }

.check-list { display: flex; flex-direction: column; gap: .35rem; }
.check-list .check { margin: 0; justify-content: flex-start; }
.check-list .check input { width: auto; flex: 0 0 auto; margin: 0; }
.check-list .check span { white-space: nowrap; }

.sig-preview { background: repeating-conic-gradient(#f1f3f7 0 25%, #fff 0 50%) 0 0/20px 20px; border: 1px solid var(--line, #e3e6ee); border-radius: 10px; padding: 1rem; display: inline-block; max-width: 100%; margin-bottom: .8rem; }
.sig-preview img { max-height: 120px; max-width: 100%; display: block; }
.sig-preview.sm img { max-height: 70px; }
.sig-pad { width: 100%; max-width: 800px; height: auto; aspect-ratio: 8/3; background: #fff; border: 2px dashed #c9cfdc; border-radius: 10px; touch-action: none; cursor: crosshair; display: block; }

.sig-level-form { margin-bottom: 1rem; }
.sig-level-form input[type=range] { width: 100%; margin: .3rem 0 .5rem; }
.sig-canvas-preview { display: block; max-width: 100%; max-height: 160px; background: repeating-conic-gradient(#f1f3f7 0 25%, #fff 0 50%) 0 0/20px 20px; border: 1px solid var(--line, #e3e6ee); border-radius: 10px; margin-bottom: .6rem; }

.note-cell { max-width: 260px; }
.note-view { white-space: pre-wrap; font-size: .85rem; color: var(--ink-soft, #475569); cursor: text; min-height: 1.2em; border-radius: 6px; padding: .2rem .3rem; margin: -.2rem -.3rem; }
.note-view:hover { background: #f1f4fa; }
.note-edit textarea { width: 100%; min-height: 60px; font-size: .85rem; }

/* banners (1.9.4) */
.banner-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.banner-head h3 { margin: 0; }
.banner-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem; margin-top: 1rem; align-items: start; }
@media (max-width: 900px) { .banner-grid { grid-template-columns: 1fr; } }
.banner-preview { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16/5.5; border-radius: 16px; color: #fff; display: flex; align-items: center; padding: 1.2rem 1.6rem;
  background: linear-gradient(120deg, #173FB0 0%, #1F4FD8 45%, #3B82F6 100%); }
.banner-preview.is-media { background: linear-gradient(120deg, #0B1F3A 0%, #16305A 50%, #1F4FD8 100%); }
.banner-preview .banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center var(--hero-pos, center); z-index: -2; }
.banner-preview .banner-shade { position: absolute; inset: 0; z-index: -1; display: none;
  background: linear-gradient(100deg, rgba(8,20,45,calc(var(--hero-dim, .45) + .25)) 0%, rgba(8,20,45,var(--hero-dim, .45)) 45%, rgba(8,20,45,calc(var(--hero-dim, .45) * .35)) 100%); }
.banner-preview.has-bg .banner-shade { display: block; }
.banner-text { display: grid; gap: .25rem; max-width: 70%; }
.banner-text small { font-size: .72rem; opacity: .85; font-weight: 600; }
.banner-text b { font-size: 1.35rem; line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.banner-text span { font-size: .8rem; opacity: .85; }
.banner-form input[type=range] { width: 100%; }
.banner-form .check { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.banner-form .check input { width: auto; margin: 0; }
.banner-sub { margin: 1.4rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--line, #e5e7eb); }
.banner-lang .lang-tag { display: inline-block; margin-bottom: .5rem; font-size: .8rem; padding: .15rem .6rem; border-radius: 999px; background: #EEF2FF; color: #1F4FD8; }

/* ---- Page content (1.9.8) ---- */
.photo-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.photo-slot { display: flex; flex-direction: column; gap: .45rem; }
.photo-slot b { font-size: .85rem; }
.photo-slot input[type=file] { font-size: .8rem; max-width: 100%; }
.photo-prev { aspect-ratio: 4/3; border-radius: 12px; border: 2px dashed #CBD5E1; background: #F8FAFC; display: grid; place-items: center; overflow: hidden; color: #94A3B8; font-size: .8rem; text-align: center; padding: .5rem; }
.photo-prev.has-img { border-style: solid; border-color: #E2E8F0; padding: 0; }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stat-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
@media (max-width: 900px) { .photo-slots { grid-template-columns: 1fr 1fr; } .stat-values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .photo-slots, .stat-values { grid-template-columns: 1fr; } }

/* ---- v1.9.11: tool badge picker + deployed clients ---- */
.pill.badge-hot { background: linear-gradient(90deg,#FF4D2E,#FF8A00); color: #fff; }
.pill.badge-bestseller { background: linear-gradient(90deg,#F5B300,#FFD84D); color: #5B3A00; }
.pill.badge-new { background: linear-gradient(90deg,#10B981,#22D3EE); color: #fff; }
.badge-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge-opt input { position: absolute; opacity: 0; pointer-events: none; }
.badge-opt span { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 999px; border: 1.5px solid #CBD5E1; font-size: .82rem; font-weight: 700; cursor: pointer; color: #475569; background: #fff; transition: all .15s ease; }
.badge-opt span svg { width: 15px; height: 15px; }
.badge-opt-hot span { color: #E5391F; } .badge-opt-bestseller span { color: #B57F00; } .badge-opt-new span { color: #059669; }
.badge-opt input:checked + span { color: #fff; border-color: transparent; box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); }
.badge-opt-hot input:checked + span { background: linear-gradient(90deg,#FF4D2E,#FF8A00); }
.badge-opt-bestseller input:checked + span { background: linear-gradient(90deg,#E9A800,#FFC93C); color: #4A2F00; }
.badge-opt-new input:checked + span { background: linear-gradient(90deg,#10B981,#06B6D4); }
.badge-tick { font-style: normal; font-size: .75rem; width: 0; opacity: 0; overflow: hidden; transition: width .15s ease, opacity .15s ease; }
.badge-opt input:checked + span .badge-tick { width: .8rem; opacity: 1; }
.badge-opt input:focus-visible + span { outline: 2px solid #1F4FD8; outline-offset: 2px; }
.badge-opt input:focus-visible + span { outline: 2px solid #1F4FD8; outline-offset: 2px; }
.form-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.client-rows { display: grid; gap: .8rem; margin-bottom: 1rem; }
.client-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 1rem; align-items: start; padding: .9rem; border: 1px solid #E2E8F0; border-radius: 14px; background: #fff; }
.client-row.is-new { border-style: dashed; border-color: #93A4C3; background: #F8FAFF; }
.client-thumb { width: 120px; height: 80px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; padding: 8px;
  background: repeating-conic-gradient(#F1F5F9 0% 25%, #fff 0% 50%) 0 0 / 14px 14px; border: 1px solid #E2E8F0; }
.client-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.client-thumb.is-empty { background: #F8FAFC; border-style: dashed; color: #94A3B8; font-size: .78rem; font-weight: 700; text-align: center; }
.client-fields { display: grid; grid-template-columns: 1.2fr 1.2fr 80px 1.4fr; gap: .6rem; }
.client-fields .field { margin: 0; }
.client-acts { display: flex; flex-direction: column; gap: .4rem; padding-top: 1.45rem; }
.client-warn { grid-column: 1 / -1; margin: 0; color: #B45309; }
@media (max-width: 1100px) { .client-fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .client-row { grid-template-columns: 1fr; } .client-acts { flex-direction: row; padding-top: 0; } }
/* form tidy: fields don't stretch, checkboxes inside fields keep their natural size */
.field { align-content: start; }
.three, .two { align-items: start; }
.field input[type=checkbox], .field input[type=radio] { width: auto; padding: 0; }
.field .check { margin: .35rem 0 0; font-size: .82rem; }

/* ---- v1.9.14: cancelled quotes, stage pipeline, receivables ---- */
.pill.is-void { background: #FEE2E2; color: #991B1B; text-decoration: line-through; text-decoration-thickness: 2px; }
.btn.danger-ghost { background: #fff; color: #B91C1C; border: 1px solid #FECACA; }
.btn.danger-ghost:hover { background: #FEF2F2; }
.btn.danger:hover { background: #FEF2F2; }
.cancel-pop { position: relative; }
.cancel-pop > summary { list-style: none; cursor: pointer; }
.cancel-pop > summary::-webkit-details-marker { display: none; }
.cancel-box { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; width: 340px; padding: 1rem; border-radius: 14px; background: #fff;
  border: 1px solid #FECACA; box-shadow: 0 24px 50px -20px rgba(15,23,42,.45); display: grid; gap: .4rem; }
.cancel-box .hint { margin: 0; }
.cancel-box .btn.danger { background: #DC2626; color: #fff; border-color: #DC2626; }
.void-banner { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; margin-bottom: 1.2rem; border-radius: 14px; border: 1px solid #FECACA;
  background: repeating-linear-gradient(135deg, #FEF2F2 0 12px, #FFF5F5 12px 24px); }
.void-banner .void-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #DC2626; color: #fff; font-weight: 800; flex: none; }
.void-banner > div { display: grid; gap: .15rem; flex: 1; }
.void-banner b { color: #991B1B; } .void-banner span { color: #7F1D1D; font-size: .9rem; } .void-banner small { color: #64748B; }
.is-void-row td { color: #94A3B8; }
.is-void-row td a b { text-decoration: line-through; color: #94A3B8; }

/* calendar: cancelled events are struck through */
.ev.is-cancelled { background: #CBD5E1 !important; color: #475569; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #DC2626; opacity: .85; }
.ev.is-cancelled::before { content: '✕ '; color: #DC2626; font-weight: 800; text-decoration: none; display: inline-block; margin-right: .15rem; }
.legend-bar .lg-void s { color: #475569; text-decoration-color: #DC2626; text-decoration-thickness: 2px; font-weight: 700; }

/* dashboard money + stage pipeline */
.money-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.money-card { background: #fff; border: 1px solid var(--a-line); border-radius: 14px; padding: 1rem 1.2rem; display: grid; gap: .25rem; position: relative; overflow: hidden; }
.money-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #1F4FD8; }
.money-card.is-ok::before { background: #16A34A; } .money-card.is-bad::before { background: #DC2626; }
.money-card > span { color: var(--a-mute); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.money-card > b { font: 800 1.55rem 'Nunito', sans-serif; }
.money-card.is-bad > b { color: #B91C1C; } .money-card.is-ok > b { color: #15803D; }
.money-card small { color: var(--a-mute); font-size: .8rem; } .money-card small em { color: #B91C1C; font-style: normal; font-weight: 700; }
.m-progress { height: 8px; border-radius: 99px; background: #E2E8F0; overflow: hidden; margin: .2rem 0; }
.m-progress.sm { height: 6px; }
.m-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22C55E, #16A34A); transition: width .8s ease; }
.stage-row { display: flex; align-items: stretch; gap: .5rem; margin-bottom: 1.4rem; }
.stage-card { flex: 1; min-width: 0; display: grid; gap: .1rem; padding: .9rem 1rem; border-radius: 14px; background: #fff; border: 1px solid var(--a-line); border-top: 4px solid var(--c);
  text-decoration: none; color: var(--a-ink); transition: transform .2s ease, box-shadow .2s ease; }
.stage-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px var(--c); text-decoration: none; }
.stage-ic { font-size: 1rem; } .stage-n { font: 800 1.7rem 'Nunito', sans-serif; color: var(--c); line-height: 1.1; }
.stage-name { font-weight: 700; font-size: .9rem; } .stage-amt { font-weight: 700; font-size: .85rem; } .stage-card small { color: var(--a-mute); font-size: .74rem; }
.stage-arrow { align-self: center; color: #94A3B8; font-weight: 800; }
.stage-sep { width: 1px; background: var(--a-line); margin: 0 .4rem; }
.stage-chip { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .72rem; font-weight: 700; background: #F1F5F9; color: #475569; white-space: nowrap; }
.stg-open.stage-chip { background: #F1F5F9; color: #475569; } .stg-upcoming.stage-chip { background: #DBEAFE; color: #1E40AF; }
.stg-debt.stage-chip { background: #FEE2E2; color: #991B1B; } .stg-paid.stage-chip { background: #DCFCE7; color: #166534; } .stg-lost.stage-chip { background: #F1F5F9; color: #94A3B8; text-decoration: line-through; }
.due-tag { display: inline-block; padding: .1rem .5rem; border-radius: 6px; font-size: .74rem; font-weight: 700; background: #F1F5F9; color: #334155; white-space: nowrap; }
.due-tag.is-late { background: #DC2626; color: #fff; animation: dueBlink 1.6s ease-in-out infinite; } .due-tag.is-soon { background: #FEF3C7; color: #92400E; }
@keyframes dueBlink { 50% { opacity: .65; } }
table.owing tr.is-overdue td { background: #FFF7F7; }
.stage-filters { margin-bottom: .4rem; align-items: center; }
@media (max-width: 1100px) { .money-row { grid-template-columns: 1fr 1fr; } .stage-row { flex-wrap: wrap; } .stage-card { flex: 1 1 30%; } .stage-arrow, .stage-sep { display: none; } }
@media (max-width: 600px) { .money-row { grid-template-columns: 1fr; } .stage-card { flex: 1 1 45%; } .cancel-box { width: min(340px, 86vw); } }

/* ---- v1.9.15: API keys + guide ---- */
.api-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; align-items: start; }
.api-newkey { margin-bottom: 1.2rem; padding: 1.1rem 1.2rem; border-radius: 16px; background: linear-gradient(135deg, #ECFDF5, #F0F9FF); border: 1px solid #A7F3D0; }
.api-newkey-head { display: flex; gap: .8rem; align-items: center; margin-bottom: .7rem; } .api-newkey-head > span { font-size: 1.6rem; }
.api-newkey-head div { display: grid; } .api-newkey-head small { color: #B45309; font-weight: 600; }
.api-key-box { display: flex; gap: .6rem; align-items: center; background: #0B1F3A; border-radius: 12px; padding: .7rem .8rem; }
.api-key-box code { flex: 1; color: #A7F3D0; font-size: .95rem; word-break: break-all; }
.api-keys { display: grid; gap: .8rem; }
.api-key { border: 1px solid var(--a-line); border-radius: 14px; padding: .9rem 1rem; display: grid; gap: .5rem; background: #fff; }
.api-key.is-off { background: #F8FAFC; opacity: .75; }
.api-key-top { display: flex; justify-content: space-between; gap: 1rem; }
.api-key-stat { text-align: right; } .api-key-stat b { display: block; font: 800 1.3rem 'Nunito', sans-serif; } .api-key-stat small { color: var(--a-mute); }
.api-key-origins { display: flex; gap: .5rem; } .api-key-origins input { flex: 1; font: inherit; font-size: .85rem; padding: .4rem .6rem; border: 1px solid var(--a-line); border-radius: 8px; }
.api-guide h3 { margin-top: 1.6rem; }
.api-facts { display: grid; grid-template-columns: 2fr 1fr 1.3fr 1fr; gap: .8rem; }
.api-facts > div { border: 1px solid var(--a-line); border-radius: 12px; padding: .7rem .9rem; display: grid; gap: .25rem; align-content: start; }
.api-facts small { color: var(--a-mute); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
.api-facts code { word-break: break-all; font-size: .85rem; } .api-facts .btn { justify-self: start; }
.api-warn { padding: .8rem 1rem; border-radius: 12px; background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: .9rem; }
.api-table code { font-size: .82rem; } .api-table td { vertical-align: top; }
.get { display: inline-block; font: 800 .68rem/1 'Nunito', sans-serif; padding: .25rem .4rem; border-radius: 5px; background: #16A34A; color: #fff; letter-spacing: .04em; }
code.param { background: #EEF2FF; color: #3730A3; padding: .05rem .35rem; border-radius: 5px; cursor: help; }
.api-params { margin: .3rem 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .9rem; }
.api-console { display: flex; gap: .5rem; align-items: center; padding: .5rem; border: 1px solid var(--a-line); border-radius: 12px; background: #F8FAFC; }
.api-console input { flex: 1; font: 600 .9rem ui-monospace, Menlo, Consolas, monospace; border: 0; background: transparent; padding: .4rem; outline: none; }
.api-out { margin-top: .6rem; border-radius: 12px; overflow: hidden; border: 1px solid #1E293B; }
.api-out-bar { display: flex; gap: 1rem; align-items: center; padding: .45rem .8rem; background: #1E293B; color: #CBD5E1; font-size: .8rem; }
.api-out-bar #api-time { margin-right: auto; } .api-out-bar .ok { color: #4ADE80; font-weight: 700; } .api-out-bar .bad { color: #F87171; font-weight: 700; }
.api-out pre, pre.api-code { margin: 0; max-height: 420px; overflow: auto; padding: 1rem; background: #0B1220; color: #E2E8F0; font: .8rem/1.55 ui-monospace, Menlo, Consolas, monospace; white-space: pre; }
pre.api-code { border-radius: 0 12px 12px 12px; }
.api-out pre .k { color: #93C5FD; } .api-out pre .s { color: #86EFAC; } .api-out pre .n { color: #FCA5A5; } .api-out pre .b { color: #FDE68A; }
.api-tabs { display: flex; gap: .3rem; margin-top: .4rem; } .api-tabs button { font: inherit; font-size: .82rem; font-weight: 700; padding: .45rem .9rem; border: 0; border-radius: 10px 10px 0 0; background: #E2E8F0; color: #475569; cursor: pointer; }
.api-tabs button.is-active { background: #0B1220; color: #fff; }
@media (max-width: 1000px) { .api-grid { grid-template-columns: 1fr; } .api-facts { grid-template-columns: 1fr 1fr; } }