body.admin { background: var(--soft); }
.a-top { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.a-top-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-height: 58px; }
.a-top h1 { font: 400 22px var(--serif); margin: 0; letter-spacing: .04em; }
.a-top .sp { flex: 1; }
.a-main { max-width: 1200px; margin: 0 auto; padding: 18px 16px 120px; }
.a-search { width: 100%; padding: 14px 16px; border: 1px solid var(--line); background: #fff; font-size: 16px; outline: none; margin-bottom: 14px; }
.a-search:focus { border-color: var(--fg); }
.a-list { display: grid; gap: 8px; }
.a-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; background: #fff; padding: 8px; border: 1px solid var(--line); transition: border-color .15s; }
.a-row:hover { border-color: #cfcfcf; }
.a-row .th { width: 84px; aspect-ratio: 3/2; background: var(--soft); overflow: hidden; }
.a-row .th img { width: 100%; height: 100%; object-fit: cover; }
.a-row b { font-weight: 400; font-size: 16px; display: block; }
.a-row .meta { color: var(--muted); font-size: 13px; }
.badge { font-size: 11px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 99px; color: #555; white-space: nowrap; }
.badge.on { background: var(--fg); color: #fff; border-color: var(--fg); }
.a-month { font-size: 12px; letter-spacing: .14em; color: var(--muted); margin: 18px 2px 4px; }

.card-a { background: #fff; border: 1px solid var(--line); padding: 18px; margin-bottom: 14px; }
.card-a h2 { font-weight: 400; font-size: 17px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.card-a h2 .sp { flex: 1; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fld label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.fld input[type=text], .fld input[type=date], .fld input[type=password], .fld input[type=url], .fld input[type=tel] { width: 100%; padding: 10px; border: 1px solid var(--line); outline: none; font-size: 15px; background: #fff; }
.fld input:focus { border-color: var(--fg); }
.toggles { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.tg { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.tg input { width: 18px; height: 18px; accent-color: var(--fg); }
.link { direction: ltr; display: inline-block; font-size: 13px; color: #555; border-bottom: 1px solid var(--line); }

/* the cover, as the gallery opens on a computer and on a phone */
.cv-devs { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; }
.cv-dev { margin: 0; display: grid; gap: 6px; justify-items: center; }
.cv-dev figcaption { font-size: 12px; color: var(--muted); }
.cv-scr { position: relative; overflow: hidden; background: #111; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 0 0 6px #1b1b1b, 0 8px 24px rgba(0,0,0,.18); border-radius: 6px; }
.cv-scr.drag { cursor: grabbing; }
.cv-d { flex: 1 1 260px; max-width: 460px; }
.cv-d .cv-scr { width: 100%; aspect-ratio: 16 / 10; }
.cv-m .cv-scr { width: 128px; aspect-ratio: 9 / 19.5; border-radius: 16px; }
.cv-scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cv-scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); pointer-events: none; }
.cv-scr::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.7); z-index: 1; pointer-events: none; }
.cv-txt { position: absolute; inset: auto 0 9% 0; z-index: 2; text-align: center; color: #fff; display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.cv-txt b { font-weight: 300; font-size: 17px; }
.cv-txt span { font-size: 7px; letter-spacing: .3em; opacity: .9; }
.cv-txt i { font-style: normal; font-size: 7px; border: 1px solid rgba(255,255,255,.8); padding: 3px 8px; margin-top: 5px; }
.cv-m .cv-txt b { font-size: 11px; }
.cv-m .cv-txt span, .cv-m .cv-txt i { font-size: 5px; }

.folders { display: grid; gap: 6px; }
.frow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); }
.frow .nm { flex: 1; min-width: 0; }
.frow .n { color: var(--muted); font-size: 12px; }
.mini { font-size: 12px; padding: 6px 10px; border: 1px solid var(--line); background: #fff; white-space: nowrap; }
.mini:hover { border-color: var(--fg); }
.mini.danger { color: var(--heart); }

.drop { border: 1.5px dashed #c9c9c9; padding: 26px 16px; text-align: center; color: #666; transition: background .15s, border-color .15s; }
.drop.over { background: #fafafa; border-color: var(--fg); }
.drop .row-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.prog { height: 4px; background: var(--line); margin-top: 14px; overflow: hidden; display: none; }
.prog.on { display: block; }
.prog i { display: block; height: 100%; width: 0; background: var(--fg); transition: width .2s; }
.prog-txt { font-size: 13px; color: #555; margin-top: 6px; min-height: 20px; }

.a-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.a-ph { position: relative; aspect-ratio: 1; background: var(--soft); overflow: hidden; cursor: pointer; }
.a-ph img { width: 100%; height: 100%; object-fit: cover; }
.a-ph.sel { outline: 3px solid var(--fg); outline-offset: -3px; }
.a-ph .tag { position: absolute; top: 5px; inset-inline-start: 5px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 6px; }
.a-ph .fv { position: absolute; bottom: 5px; inset-inline-end: 5px; background: rgba(255,255,255,.9); color: var(--heart); font-size: 11px; padding: 1px 6px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
/* the bar for the photos picked in a gallery: a floating card */
.a-selbar { position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; transform: translateY(140%); opacity: 0; transition: transform .25s var(--ease), opacity .2s; }
.a-selbar.open { transform: none; opacity: 1; }
.sb-in { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: #fff; color: var(--fg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.16); padding: 8px 10px 8px 8px; max-width: 760px; width: 100%; }
.sb-thumbs { display: flex; flex-shrink: 0; }
.sb-thumbs img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.sb-thumbs img + img { margin-inline-start: -16px; }
.a-selbar .n { font-size: 13px; font-weight: 600; white-space: nowrap; }
.sb-acts { display: flex; gap: 6px; margin-inline-start: auto; flex-wrap: wrap; justify-content: flex-end; }
.sb-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--soft, #f5f5f3); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.sb-btn:hover { border-color: var(--fg); }
.sb-btn span { font-size: 13px; opacity: .75; }
.sb-btn.danger { color: #b3261e; }
.sb-btn.danger:hover { background: #b3261e; color: #fff; border-color: #b3261e; }
.sb-move select { border: 0; background: transparent; font: inherit; font-size: 13px; color: inherit; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; }
.sb-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; font-size: 15px; cursor: pointer; color: var(--muted); flex-shrink: 0; }
.sb-x:hover { background: var(--soft, #f2f2f0); color: var(--fg); }
@media (max-width: 640px) { .sb-in { flex-wrap: wrap; } .sb-acts { width: 100%; justify-content: stretch; } .sb-btn { flex: 1; justify-content: center; } }

.fav-v { border-top: 1px solid var(--line); padding: 12px 0; }
.fav-v:first-child { border-top: 0; padding-top: 0; }
.fav-v .em { font-weight: 400; }
.fav-v .ls { margin: 6px 0 0; color: #555; font-size: 13px; }
.fav-thumbs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.fav-thumbs img { width: 54px; height: 54px; object-fit: cover; }
.login { max-width: 340px; margin: 18vh auto 0; background: #fff; padding: 28px; border: 1px solid var(--line); }
.login h1 { font: 400 26px var(--serif); margin: 0 0 16px; text-align: center; }
.login input { width: 100%; padding: 12px; border: 1px solid var(--line); font-size: 16px; outline: none; }
.login .err { color: var(--heart); font-size: 13px; min-height: 20px; margin-top: 6px; }

/* viewer accounts: read only */
.ro [data-edit] { display: none !important; }
.ro .fld input { pointer-events: none; background: var(--soft); }

/* sign-in */
.login.wide { max-width: 420px; }
.login .fld { margin-bottom: 12px; }
.gbtn { width: 100%; justify-content: center; gap: 10px; padding: 13px; }
.emerg { margin-top: 18px; font-size: 12px; color: var(--muted); }
.emerg summary { cursor: pointer; }
.emerg form { display: flex; gap: 6px; margin-top: 8px; }
.emerg input { flex: 1; padding: 8px; border: 1px solid var(--line); }
/* top bar menu */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.08); min-width: 170px; z-index: 30; display: flex; flex-direction: column; }
.menu-pop a, .menu-pop button { padding: 11px 14px; text-align: start; font-size: 14px; border-bottom: 1px solid var(--line); }
.menu-pop > :last-child { border-bottom: 0; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--soft); }
select.acc { max-width: 220px; }
/* dashboard */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stats > div { background: #fff; border: 1px solid var(--line); padding: 16px; }
.stats b { display: block; font: 400 28px/1.2 var(--sans); }
.stats span { color: var(--muted); font-size: 13px; }
.stats .pos b { color: #2f7d4f; } .stats .neg b { color: var(--heart); }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: start; font-weight: 400; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl .n { color: var(--muted); font-size: 12px; }

/* reviews and messages */
.cnt { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--heart); color: #fff; font-size: 11px; text-align: center; line-height: 18px; }
.cnt:empty { display: none; }
.fb-item { border-top: 1px solid var(--line); padding: 14px 0; }
.fb-item:first-of-type { border-top: 0; }
.fb-item.unread { background: linear-gradient(to left, transparent, #faf8f3); }
.fb-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.fb-head b { font-weight: 500; }
.fb-head .n { color: var(--muted); font-size: 12px; }
.fb-item p { margin: 8px 0 10px; white-space: pre-line; }
.fb-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.stars-s { color: #c9a227; letter-spacing: 1px; direction: ltr; }

/* main navigation */
.a-nav { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 58px; z-index: 19; }
.a-nav-in { max-width: 1200px; margin: 0 auto; display: flex; gap: 22px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.a-nav a { padding: 11px 0 12px; font-size: 14px; font-weight: 500; color: #666; border-bottom: 2px solid transparent; white-space: nowrap; }
.a-nav a.on { color: var(--fg); border-color: var(--fg); }
/* control board */
.stats small { font-size: 14px; color: var(--muted); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 820px) { .cols2 { grid-template-columns: 1fr; } }
.queue .big { font: 400 30px var(--sans); }
.queue .next { background: var(--soft); padding: 10px 12px; margin: 0 0 10px; font-size: 14px; }
.q-list { display: grid; gap: 2px; max-height: 420px; overflow: auto; }
.q-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.q-row .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.q-row .nm b { font-weight: 500; }
.q-row .n { color: var(--muted); font-size: 12px; }
.badge-d { font-size: 12px; padding: 3px 8px; border-radius: 99px; white-space: nowrap; min-width: 64px; text-align: center; }
.badge-d.ok { background: #e7f4ec; color: #2f7d4f; }
.badge-d.warn { background: #fdf1dc; color: #9a6400; }
.badge-d.bad { background: #fbe4e4; color: #b03434; }
.badge-d.up { background: #eef0fb; color: #3f4fa8; }
.proj td { vertical-align: middle; }
.ro [data-edit-ctl] { pointer-events: none; opacity: .7; }

.q-row .note { white-space: pre-line; color: #555; }

.vrow { border-bottom: 1px solid var(--line); }
.vrow .frow { border: 0; }
.vc { padding: 0 10px 10px; }
.vc .frow { border: 0; border-top: 1px solid var(--line); padding: 7px 0; }
.vc .frow.done { opacity: .5; }
.vc .tc { font-variant-numeric: tabular-nums; background: var(--soft); padding: 2px 8px; font-size: 13px; direction: ltr; }
.mk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; }

.q-next { border: 1px solid var(--fg); padding: 4px 10px 2px; margin-bottom: 12px; position: relative; }
.q-next .lbl { position: absolute; top: -9px; inset-inline-start: 10px; background: #fff; padding: 0 6px; font-size: 11px; letter-spacing: .08em; }
.q-next .q-row { border: 0; }
.q-sub { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.q-empty { text-align: center; padding: 22px 0; color: #2f7d4f; font-size: 15px; }
.q-all { margin-top: 10px; }
.q-allbox .q-list { margin-top: 8px; max-height: 360px; }

/* editors */
.urg { background: #b03434; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ed { border: 1px solid var(--line); padding: 10px; }
.ed-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ed-h .big { margin-inline-start: auto; font-size: 22px; }
.pos { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft); font-size: 12px; flex: none; }
.on-urg { background: #b03434; color: #fff; border-color: #b03434; }
.on-st { background: var(--fg); color: #fff; border-color: var(--fg); }
tr.more td { background: #fafafa; }
.job.first { border-color: var(--fg); }
.job h2 { flex-wrap: wrap; }
.job .lbl { font-size: 11px; letter-spacing: .08em; border: 1px solid var(--fg); padding: 2px 8px; }
.songs-box { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.songs-box .note { margin: 4px 0 0; white-space: pre-line; color: #555; }
.badge.warn { background: #fdf1dc; color: #9a6400; border-color: #f0d9a8; }
/* social */
.so-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.so-kpi div { display: flex; flex-direction: column; } .so-kpi b { font-size: 26px; font-weight: 400; font-variant-numeric: tabular-nums; } .so-kpi span { font-size: 12px; color: #6b6b6b; }
.so-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin-top: 16px; border-bottom: 1px solid var(--line); }
.so-bars i { flex: 1; height: 100%; position: relative; background: linear-gradient(to top, #1a1a1a var(--h), transparent var(--h)); }
.so-bars i::after { content: ""; position: absolute; left: 50%; bottom: var(--r); width: 5px; height: 5px; border-radius: 50%; background: #b07a5a; transform: translate(-50%, 50%); }
.so-works { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.so-works div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #555; } .so-works b { color: #1a1a1a; font-weight: 500; font-size: 14px; }
.so-sum { margin: 8px 0; }
.so-posts td { vertical-align: middle; font-variant-numeric: tabular-nums; } .so-cap { max-width: 340px; white-space: normal; font-size: 13px; }
.so-th img { width: 48px; height: 60px; object-fit: cover; display: block; background: var(--line); }
.so-build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .so-build { grid-template-columns: 1fr; } }
.so-sugg { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; } .so-sugg h3 { font-weight: 400; font-size: 14px; margin: 0; color: #555; }
.so-sg { display: grid; grid-template-columns: 132px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: start; padding: 8px; border: 1px solid var(--line); background: #fff; }
.so-sg:hover, .so-sg:focus-visible { border-color: #1a1a1a; }
.so-sg-th { grid-row: span 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .so-sg-th img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.so-sg b { font-weight: 500; align-self: end; }
.so-fold { border-top: 1px solid var(--line); padding: 8px 0; } .so-fold summary { cursor: pointer; padding: 4px 0; }
.so-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; margin-top: 8px; }
.so-ph { position: relative; padding: 0; border: 2px solid transparent; background: none; } .so-ph img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.so-ph.in { border-color: #1a1a1a; } .so-ph i { position: absolute; bottom: 2px; right: 2px; font-style: normal; font-size: 10px; background: rgba(0,0,0,.6); color: #fff; padding: 0 4px; }
.so-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; min-height: 40px; }
.so-sl { position: relative; flex: 0 0 72px; border: 2px solid transparent; } .so-sl.on { border-color: #1a1a1a; }
.so-sl img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; cursor: pointer; }
.so-sl > span { position: absolute; top: 2px; right: 2px; background: #f2c200; color: #000; font-size: 11px; padding: 0 5px; }
.so-sl-a { display: flex; justify-content: center; gap: 2px; margin-top: 2px; } .so-sl-a .mini { padding: 2px 6px; }
.so-crop { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.so-crop canvas { width: min(100%, 360px); aspect-ratio: 4/5; touch-action: none; cursor: grab; background: var(--line); }
.so-edit textarea { width: 100%; padding: 10px; border: 1px solid var(--line); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; margin-top: 8px; }
.so-check { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #6b6b6b; } .so-check li.ok { color: #2f6b4f; }
.so-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.danger { color: var(--heart); }
.so-dash h3 { font-weight: 400; font-size: 13px; color: #6b6b6b; margin: 16px 0 6px; }
.so-up-th { width: 40px; height: 50px; object-fit: cover; }
.so-ins { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
/* crm */
.crm-tabs { flex-wrap: wrap; } .crm-tabs .n { color: #888; font-size: 11px; margin-inline-start: 4px; }
.crm-tbl tr[data-id] { cursor: pointer; } .crm-tbl tr[data-id]:hover td { background: #faf9f6; }
.crm-tbl td { font-size: 13px; vertical-align: top; max-width: 220px; }
.crm-more > td { background: #faf9f6; padding: 14px; }
.crm-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; white-space: normal; }
.crm-f span { display: block; font-size: 11px; color: #6b6b6b; } .crm-f div { font-size: 14px; overflow-wrap: anywhere; }
.crm-links { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.crm-sub { border-top: 1px solid var(--line); padding: 10px 0; } .crm-sub summary { cursor: pointer; } .crm-sub .crm-card { margin-top: 10px; }
.msg-g { margin-top: 18px; } .msg-g h3 { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
.wa { margin: 10px 0 4px; max-width: 460px; padding: 10px 12px; border-radius: 10px 10px 2px 10px; background: color-mix(in srgb, #25d366 12%, var(--bg, #fff)); line-height: 1.55; font-size: 14px; white-space: normal; }
.wa-btn { margin-top: 8px; padding: 7px; text-align: center; border-top: 1px solid var(--line); color: #128c7e; font-size: 13px; }
/* the customers grid, in Airtable's manner: frozen header and first column, chips for select values */
.at-box { padding: 12px; }
.at-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.at-bar .a-search { flex: 1 1 220px; margin: 0; padding: 10px 12px; }
.at-bar .filters { margin: 0; }
.at-cols { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px; margin-bottom: 10px; background: var(--soft); font-size: 13px; }
.at-cols label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.at-grid { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--line); background: #fff; }
.at-tbl { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.at-tbl th, .at-tbl td { padding: 7px 10px; border-bottom: 1px solid #eee; border-inline-start: 1px solid #f0f0f0; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; text-align: start; vertical-align: middle; height: 34px; box-sizing: border-box; }
.at-tbl thead th { position: sticky; top: 0; z-index: 2; background: #f7f7f5; font-weight: 500; color: #555; cursor: pointer; user-select: none; }
.at-tbl thead th:hover { color: var(--fg); }
.at-tbl td:nth-child(2), .at-tbl th:nth-child(2) { position: sticky; inset-inline-start: 36px; z-index: 1; background: #fff; font-weight: 500; box-shadow: inset -1px 0 0 #e4e4e4; }
.at-tbl thead th:nth-child(2) { z-index: 3; background: #f7f7f5; }
.at-tbl .at-rn { position: sticky; inset-inline-start: 0; z-index: 1; width: 36px; min-width: 36px; color: #aaa; font-size: 11px; text-align: center; background: #fff; }
.at-tbl thead .at-rn { z-index: 3; background: #f7f7f5; }
.at-tbl tbody tr { cursor: pointer; }
.at-tbl tbody tr:hover td { background: #f6f8fb; }
.at-chip { display: inline-block; padding: 1px 8px; margin-inline-end: 4px; border-radius: 99px; font-size: 12px; line-height: 18px; background: hsl(var(--h) 70% 92%); color: hsl(var(--h) 45% 28%); }
.at-thumb { height: 22px; width: auto; vertical-align: middle; margin-inline-end: 3px; border: 1px solid #eee; }
.at-cards { display: none; }
.at-card { display: grid; gap: 4px; width: 100%; text-align: start; background: #fff; border: 1px solid var(--line); padding: 12px 14px; font: inherit; color: inherit; cursor: pointer; transition: transform .1s, border-color .15s; }
.at-card:active { transform: scale(.985); }
.at-card b { font-size: 15px; font-weight: 500; }
.at-card span { font-size: 13px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.at-card i { font-style: normal; color: #888; font-size: 11px; min-width: 70px; }
@media (max-width: 720px) {
  .at-box { padding: 0; background: transparent; border: 0; }
  .at-grid { display: none; }
  .at-cards { display: grid; gap: 8px; }
  .crm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .crm-tabs .chip { flex: none; white-space: nowrap; }
}
/* one record: side sheet on a computer, full screen on a phone */
.at-sheet { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0); transition: background .2s; }
.at-sheet.in { background: rgba(0,0,0,.25); }
.at-sheet-in { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(620px, 100%); background: #fff; overflow-y: auto; padding: 0 20px 40px; transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 40px rgba(0,0,0,.12); }
.at-sheet.in .at-sheet-in { transform: none; }
.at-sheet header { position: sticky; top: 0; background: #fff; display: flex; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 14px; z-index: 1; }
.at-sheet h2 { flex: 1; margin: 0; font-size: 18px; font-weight: 500; }
.at-sheet .crm-card { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) { .at-sheet, .at-sheet-in { transition: none; } }
.at-acts { border: 1px solid var(--line); background: #fafaf8; padding: 12px; margin-bottom: 16px; }
.at-acts-h { font-weight: 500; margin-bottom: 8px; }
.at-acts-b { display: flex; flex-wrap: wrap; gap: 6px; }
.at-acts-out:not(:empty) { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.at-fx { margin: 4px 0; font-size: 13px; color: #555; }
.at-msg { margin-top: 10px; }
/* ---- customers interface (like the Airtable interface): side nav, list pages, calendar, dashboards ---- */
.ui-wrap { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; }
.ui-nav { position: sticky; top: 112px; display: grid; gap: 16px; }
.ui-g { display: grid; gap: 2px; }
.ui-g > span { font-size: 11px; letter-spacing: .08em; color: #888; padding: 0 10px 4px; }
.ui-nav a { padding: 8px 10px; border-radius: 8px; font-size: 14px; color: #444; transition: background .15s; }
.ui-nav a:hover { background: #f0efec; }
.ui-nav a.on { background: var(--fg); color: #fff; }
.ui-sync { font-size: 11px; padding: 0 10px; line-height: 1.6; }
.ui-body { min-width: 0; }
.ui-list header, .ui-cal header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ui-list h2, .ui-cal h2, .dash-t { font: 400 24px var(--serif); margin: 0; }
.ui-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ui-tools .a-search { flex: 1 1 220px; margin: 0; padding: 10px 12px; }
.ui-tools .filters { margin: 0; }
.ui-rows { display: grid; gap: 6px; }
.ui-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(0, 1.6fr) minmax(0, 1.4fr); gap: 6px 14px; align-items: center; width: 100%; text-align: start; font: inherit; color: inherit; background: #fff; border: 1px solid var(--line); padding: 11px 14px; cursor: pointer; transition: border-color .15s, transform .1s; }
.ui-row:hover { border-color: #cfcfcf; }
.ui-row:active { transform: scale(.995); }
.ui-main { display: grid; gap: 2px; min-width: 0; } .ui-main b { font-weight: 500; font-size: 15px; }
.ui-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ui-more { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.ui-more i { font-style: normal; color: #999; font-size: 11px; margin-inline-end: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-inline-start: 1px solid var(--line); background: #fff; }
.cal-h { padding: 6px; font-size: 12px; color: #888; text-align: center; border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); }
.cal-d { min-height: 92px; padding: 4px; border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-d > span { font-size: 12px; color: #666; }
.cal-d.out { background: #fafaf8; } .cal-d.out > span { color: #bbb; }
.cal-d.today > span { background: var(--fg); color: #fff; border-radius: 99px; width: 22px; text-align: center; }
.cal-e { font: inherit; font-size: 12px; text-align: start; border: 0; border-radius: 5px; padding: 3px 6px; cursor: pointer; background: hsl(var(--h) 70% 92%); color: hsl(var(--h) 45% 25%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-list { display: none; gap: 6px; }
.dash-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.dash-big { background: #fff; border: 1px solid var(--line); padding: 14px 16px; display: grid; gap: 4px; }
.dash-big span { font-size: 12px; color: #777; } .dash-big b { font: 400 30px var(--serif); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.dash-card { background: #fff; border: 1px solid var(--line); padding: 14px 16px; min-width: 0; }
.dash-card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 500; }
.bar { display: grid; grid-template-columns: minmax(70px, 30%) 1fr 34px; gap: 8px; align-items: center; font-size: 12px; margin: 4px 0; }
.bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar div { background: #f3f2ef; height: 12px; border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: hsl(var(--h) 55% 60%); border-radius: 6px; }
.bar b { font-weight: 500; text-align: end; }
.pie-w { display: flex; gap: 16px; align-items: center; }
.pie { width: 110px; height: 110px; border-radius: 50%; flex: none; -webkit-mask: radial-gradient(circle, transparent 34%, #000 35%); mask: radial-gradient(circle, transparent 34%, #000 35%); }
.pie-w ul { list-style: none; margin: 0; padding: 0; font-size: 12px; display: grid; gap: 4px; min-width: 0; }
.pie-w li i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-inline-end: 6px; }
.rec { display: grid; gap: 14px; }
.rec-s h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; color: #888; font-weight: 500; }
.rec-file { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px 8px; padding: 6px 8px; border: 1px solid var(--line); font-size: 12px; }
.rec-file img { height: 44px; width: auto; }
.biz-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 10px; }
.biz-n { border: 1px solid var(--line); padding: 10px 12px; display: grid; gap: 2px; }
.biz-n b { font: 400 26px var(--serif); } .biz-n span { font-size: 12px; color: #777; }
.biz-n.hot b { color: #b26b00; } .biz-n.bad b { color: #b3362c; }
.biz-l { border-top: 1px solid var(--line); padding: 8px 0; }
.biz-l summary { cursor: pointer; font-weight: 500; font-size: 14px; }
.biz-r { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; width: 100%; text-align: start; font: inherit; background: none; border: 0; padding: 7px 4px; cursor: pointer; border-radius: 6px; color: inherit; }
.biz-r:hover { background: #f6f5f2; }
.biz-r b { font-weight: 500; } .biz-r span { font-size: 12px; color: #777; }
@media (max-width: 860px) {
  .ui-wrap { grid-template-columns: 1fr; }
  .ui-nav { position: static; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  .ui-g { display: flex; gap: 4px; flex: none; } .ui-g > span { display: none; }
  .ui-nav a { white-space: nowrap; border: 1px solid var(--line); background: #fff; }
  .ui-sync { display: none; }
  .ui-row { grid-template-columns: 1fr; }
  .cal-grid { display: none; } .cal-list { display: grid; }
}
.crm-f .at-chip { display: inline-block; font-size: 12px; color: hsl(var(--h) 45% 28%); }
.rec-file span { display: inline; font-size: 12px; color: inherit; }
/* numbers in the business block and dashboards: the sans face, lining tabular figures */
.biz-n b, .dash-big b { font: 500 26px/1.15 var(--sans); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.dash-big b { font-size: 28px; }
.bar b, .pie-w b { font-variant-numeric: tabular-nums; }
.crew-date { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; }
.crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.crew-c { display: grid; gap: 8px; text-align: start; font: inherit; color: inherit; background: #fff; border: 1px solid var(--line); padding: 12px 14px; cursor: pointer; transition: border-color .15s, transform .1s; }
.crew-c:hover { border-color: #cfcfcf; } .crew-c:active { transform: scale(.99); }
.crew-c.busy { border-color: #e2b4ae; background: #fdf6f5; } .crew-c.free { border-color: #b9d9c0; }
.crew-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .crew-top b { font-weight: 500; font-size: 15px; }
.crew-on { color: #3a9a55; font-size: 10px; }
.crew-mid { display: flex; justify-content: space-between; font-size: 13px; color: #555; font-variant-numeric: tabular-nums; }
.crew-bot { display: grid; gap: 2px; font-size: 12px; color: #777; } .crew-bot b { color: var(--fg); font-weight: 500; }
.crew-day { font-weight: 500; color: var(--fg); }
.loc-row { cursor: pointer; }
/* ---- files ---- */
.dv-rows { display: grid; gap: 4px; margin-top: 8px; }
.dv-row { display: grid; grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 8px; border-radius: 8px; transition: background .15s; }
.dv-row:hover { background: #f6f5f2; }
.dv-row b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-ic { color: #999; text-align: center; }
.dv-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.dv-crumbs { font-size: 15px; } .dv-crumbs a { color: #777; } .dv-crumbs b { font-weight: 500; }
.dv-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dv-tools .btn { padding: 8px 14px; cursor: pointer; }
.dv-prog { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; margin-bottom: 12px; }
.dv-bar { grid-column: 1 / -1; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.dv-bar i { display: block; height: 100%; width: 0; background: var(--fg); transition: width .3s; }
.dv-list { display: grid; }
.dv-item { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) auto auto; gap: 10px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); }
.dv-name { display: flex; gap: 8px; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.dv-drop { margin-top: 12px; }
.dv.over { outline: 2px dashed var(--fg); outline-offset: -8px; background: #fafaf8; }
.dv-link { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.dv-link input { flex: 1 1 220px; min-width: 0; direction: ltr; }
.dv-link b { font-weight: 500; }
.dv-log { display: grid; gap: 4px; margin-top: 8px; max-height: 320px; overflow: auto; }
.dv-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.3); display: grid; place-items: center; padding: 16px; }
.dv-box { background: #fff; width: min(480px, 100%); padding: 20px; display: grid; gap: 12px; max-height: 90vh; overflow: auto; }
.dv-box h2 { margin: 0; font-weight: 500; font-size: 18px; }
.dv-box label { display: grid; gap: 4px; font-size: 13px; color: #555; }
.dv-box [hidden] { display: none !important; }
.dv-box .a-search { margin: 0; padding: 10px 12px; }
.dv-btns { display: flex; gap: 8px; }
@media (max-width: 700px) {
  .dv-row { grid-template-columns: 24px 1fr; } .dv-row .meta { grid-column: 2; }
  .dv-item { grid-template-columns: 1fr auto; } .dv-item > .meta { grid-column: 1; }
}
.dv-prog[hidden] { display: none; }
.dv-ask { border-color: #e6c58a; background: #fffaf0; }
.dv-end { grid-template-columns: 24px minmax(0, 1.2fr) minmax(0, 1.2fr) auto; }
@media (max-width: 700px) { .dv-end { grid-template-columns: 24px 1fr; } .dv-end .dv-btns { grid-column: 2; } }
/* ---- files, Drive-like ---- */
.gd { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.gd-side { position: sticky; top: 112px; display: grid; gap: 2px; }
.gd-new { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin: 0 0 12px; padding: 12px 22px 12px 18px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 4px 10px rgba(0,0,0,.06); font: inherit; font-weight: 500; cursor: pointer; transition: box-shadow .15s, transform .1s; }
.gd-new:hover { box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.08); } .gd-new:active { transform: scale(.97); }
.gd-new svg, .gd-side a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gd-side a { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 99px; color: #333; font-size: 14px; transition: background .15s; }
.gd-side a:hover { background: #eeece8; }
.gd-side a.on { background: #e3e1dc; font-weight: 500; }
.gd-side a i { margin-inline-start: auto; font-style: normal; font-size: 11px; color: #888; }
.gd-use { font-size: 12px; color: #888; padding: 10px 14px; margin: 0; }
.gd-main { min-width: 0; min-height: 60vh; border-radius: 16px; transition: background .15s, outline-color .15s; outline: 2px dashed transparent; outline-offset: 4px; }
.gd-main.over { background: #f1f0ec; outline-color: #1c1b19; }
.gd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 20px; margin: 2px 0 16px; }
.gd-crumbs a { color: #666; padding: 2px 8px; border-radius: 8px; } .gd-crumbs a:hover { background: #eeece8; }
.gd-crumbs b { font-weight: 500; padding: 2px 8px; } .gd-sep { color: #aaa; }
.gd-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.gd-tools .a-search { flex: 1 1 220px; margin: 0; padding: 10px 14px; border-radius: 99px; }
.gd-tools .filters { margin: 0; } .gd-tools .sp { flex: 1; } .gd-tools .btn { padding: 8px 14px; }
.gd-h { font-size: 13px; font-weight: 500; color: #555; margin: 18px 0 10px; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.gd-grid.big { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gd-tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #e4e2dd; border-radius: 12px; min-width: 0; transition: background .15s, box-shadow .15s, transform .1s; }
.gd-tile:hover { background: #f8f7f4; box-shadow: 0 1px 4px rgba(0,0,0,.06); } .gd-tile:active { transform: scale(.985); }
.gd-grid.big .gd-tile { padding: 20px 18px; }
.gd-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; }
.gd-ic svg { width: 26px; height: 26px; fill: #8a8780; stroke: none; }
.gd-grid.big .gd-ic svg, .gd-grid.big .gd-ic { width: 34px; height: 34px; }
.gd-grid.big .gd-ic svg { fill: none; stroke: #6d6a63; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gd-ic.sm, .gd-ic.sm svg { width: 20px; height: 20px; } .gd-ic.sm svg { fill: none; stroke: #7d7a73; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gd-tx { display: grid; gap: 2px; min-width: 0; }
.gd-tx b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-tx i { font-style: normal; font-size: 12px; color: #888; line-height: 1.5; }
.gd-left { font-weight: 500; color: #555; } .gd-left.warn { color: #b26b00; } .gd-left.bad { color: #b3362c; }
.gd-more { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: none; border-radius: 99px; cursor: pointer; display: grid; place-items: center; opacity: .55; }
.gd-more:hover { background: #eeece8; opacity: 1; } .gd-more svg { width: 18px; height: 18px; fill: #444; }
.gd-files { background: #fff; border: 1px solid #e4e2dd; border-radius: 12px; overflow: hidden; }
.gd-fh, .gd-file { display: grid; grid-template-columns: minmax(0, 2.4fr) 90px 90px minmax(0, 1.2fr) auto; gap: 12px; align-items: center; padding: 9px 14px; }
.gd-fh { font-size: 12px; color: #888; border-bottom: 1px solid #eee; }
.gd-file { border-top: 1px solid #f0efeb; font-size: 13px; } .gd-file:first-of-type { border-top: 0; }
.gd-file:hover { background: #faf9f6; }
.gd-fn { display: flex; align-items: center; gap: 10px; min-width: 0; } .gd-fn span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-by { color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.gd-empty { display: grid; justify-items: center; gap: 6px; padding: 60px 16px; color: #888; text-align: center; }
.gd-empty svg { width: 64px; height: 64px; fill: #d9d6cf; } .gd-empty p { margin: 0; }
.gd-hint { margin-top: 14px; }
.gd-prog { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; margin-bottom: 14px; background: #fff; border: 1px solid #e4e2dd; border-radius: 12px; padding: 12px 14px; }
.gd-prog[hidden] { display: none; }
.gd-bar { grid-column: 1 / -1; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; } .gd-bar i { display: block; height: 100%; width: 0; background: #1c1b19; transition: width .3s; }
.gd-banner { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #f3f2ef; margin-bottom: 14px; }
.gd-banner.warn { background: #fff5e3; } .gd-banner.bad { background: #fdeeec; }
.gd-banner .gd-acts { margin-inline-start: auto; }
.gd-alert { display: grid; gap: 4px; padding: 14px 16px; margin-bottom: 14px; border-radius: 12px; background: #fff5e3; border: 1px solid #ecd3a4; color: inherit; }
.gd-alert span { font-size: 13px; color: #6b5a3a; }
.gd-pending { background: #fffaf0; border: 1px solid #ecd3a4; border-radius: 12px; padding: 14px; margin-bottom: 16px; display: grid; gap: 8px; }
.gd-pending h3 { margin: 0; font-size: 15px; font-weight: 500; }
.gd-ask { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) auto; gap: 8px 12px; align-items: center; padding-top: 8px; border-top: 1px solid #f0e2c4; }
.gd-ask a { display: flex; align-items: center; gap: 8px; min-width: 0; } .gd-ask b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-links, .gd-log { margin-top: 18px; background: #fff; border: 1px solid #e4e2dd; border-radius: 12px; padding: 12px 14px; }
.gd-links summary, .gd-log summary { cursor: pointer; font-weight: 500; font-size: 14px; }
.gd-log > div { display: grid; gap: 4px; margin-top: 8px; max-height: 300px; overflow: auto; font-size: 12px; color: #666; }
.gd-link { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid #eee; margin-top: 8px; }
.gd-link input { flex: 1 1 220px; min-width: 0; direction: ltr; } .gd-link b { font-weight: 500; }
.gd-link.off { opacity: .55; }
.gd-lk-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 100%; }
.gd-use-bar.lk { flex: 1 1 100%; height: 4px; }
.gd-lk .gd-link { background: #fff; border: 1px solid #e4e2dd; border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.gd-sub { margin: 6px 0 0; font-weight: 500; color: #333; }
.gd-dest { display: grid; gap: 6px; padding: 10px 12px; background: #f6f5f2; border-radius: 10px; } .gd-dest b { font-weight: 500; }
.gd-warn { display: flex !important; gap: 8px; align-items: center; color: #9a6400 !important; background: #fdf1dc; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.gd-warn input { margin: 0; accent-color: #9a6400; }
.gd-dest-list { display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.gd-dest-row { display: flex; gap: 10px; align-items: center; text-align: start; padding: 8px 10px; border-radius: 8px; border: 0; background: none; font: inherit; cursor: pointer; }
.gd-dest-row:hover { background: #f3f2ef; } .gd-dest-row.on { background: var(--fg); color: #fff; } .gd-dest-row.on .meta { color: rgba(255,255,255,.7); } .gd-dest-row b { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-menu { position: fixed; z-index: 70; background: #fff; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.16); padding: 6px 0; min-width: 180px; display: grid; animation: gdIn .14s ease-out; }
.gd-menu button { text-align: start; padding: 10px 16px; border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; }
.gd-menu button:hover { background: #f3f2ef; } .gd-menu .danger { color: #b3362c; }
@keyframes gdIn { from { opacity: 0; transform: translateY(-4px); } }
.danger-bg { background: #b3362c !important; border-color: #b3362c !important; color: #fff !important; }
@media (max-width: 760px) {
  .gd { grid-template-columns: 1fr; gap: 12px; }
  .gd-side { position: static; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
  .gd-side a { flex: none; border: 1px solid #e4e2dd; background: #fff; padding: 8px 14px; } .gd-side a i { display: none; }
  .gd-use { display: none; }
  .gd-new { position: fixed; z-index: 30; bottom: max(18px, env(safe-area-inset-bottom)); inset-inline-start: max(16px, env(safe-area-inset-left)); margin: 0; padding: 14px 20px; }
  .gd-crumbs { font-size: 16px; }
  .gd-grid { grid-template-columns: 1fr 1fr; } .gd-grid.big { grid-template-columns: 1fr; }
  .gd-fh { display: none; }
  .gd-file { grid-template-columns: minmax(0, 1fr) auto; } .gd-file > span:nth-child(2) { order: 3; color: #888; } .gd-file > span:nth-child(3), .gd-by { display: none; }
  .gd-ask { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .gd-tile, .gd-new, .gd-menu, .gd-bar i { transition: none; animation: none; } }
.gd-grid > p { grid-column: 1 / -1; }
.gd-use { display: grid; gap: 6px; text-align: start; font: inherit; font-size: 12px; color: #666; background: none; border: 0; padding: 12px 14px; margin-top: 6px; border-radius: 12px; cursor: pointer; }
.gd-use:hover { background: #eeece8; }
.gd-use-bar { display: block; height: 4px; background: #e4e2dd; border-radius: 2px; overflow: hidden; } .gd-use-bar i { display: block; height: 100%; width: 0; background: #1c1b19; }
.gd-big { font: 500 30px/1.1 var(--sans); margin: 0; font-variant-numeric: tabular-nums; }
.gd-usage { display: grid; gap: 10px; } .gd-usage > div { display: grid; grid-template-columns: 130px 1fr 70px; gap: 10px; align-items: center; font-size: 13px; } .gd-usage b { font-weight: 500; text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .gd-use { display: grid; flex: none; padding: 8px 12px; border: 1px solid #e4e2dd; background: #fff; border-radius: 99px; } .gd-use .gd-use-bar { display: none; } }
.gd-dash { display: grid; gap: 0; }
.gd-dash-use { display: grid; grid-template-columns: auto 160px; gap: 4px 14px; align-items: center; justify-content: start; font-size: 13px; color: #555; margin: 0 2px 14px; }
.gd-dash-use b { font-weight: 500; color: var(--fg); }
@media (max-width: 600px) { .gd-dash-use { grid-template-columns: 1fr; } }
/* costs on the control board */
.costs-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.costs-sum > div { border: 1px solid var(--line); padding: 10px 14px; display: grid; gap: 2px; min-width: 120px; }
.costs-sum b { font: 500 24px/1.15 var(--sans); font-variant-numeric: tabular-nums; } .costs-sum span { font-size: 12px; color: #777; }
.costs-sum .miss b { color: #b26b00; }
.costs-rows > div { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) 90px; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.costs-rows b { font-weight: 500; text-align: end; font-variant-numeric: tabular-nums; }
.costs-rows .miss b { color: #b26b00; }
.costs-rows .badge { font-style: normal; font-size: 10px; padding: 1px 6px; }
.cost-ed { display: grid; gap: 8px; }
.cost-row { display: grid; grid-template-columns: 1.4fr .8fr auto auto 1fr 1.4fr auto; gap: 6px; align-items: center; }
.cost-row .a-search { margin: 0; padding: 8px 10px; min-width: 0; }
.dv-box:has(.cost-ed) { width: min(980px, 100%); }
@media (max-width: 760px) { .costs-rows > div { grid-template-columns: 1fr auto; } .costs-rows .meta { grid-column: 1 / -1; order: 3; } .cost-row { grid-template-columns: 1fr 1fr; } }
/* systems health */
.sys.has-bad { border-color: #e2b4ae; background: #fffafa; }
.sys-rows { display: grid; }
.sys-r { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sys-r b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-err { grid-column: 2 / -1; font-size: 12px; color: #b3362c; overflow-wrap: anywhere; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #3a9a55; }
.dot.bad { background: #b3362c; } .dot.warn { background: #d08a00; } .dot.off { background: #bbb; }
.sys-errs { margin-top: 10px; } .sys-errs summary { cursor: pointer; font-size: 14px; font-weight: 500; }
.ct-box { border: 1px solid var(--line); background: #fafaf8; padding: 12px; margin-bottom: 16px; display: grid; gap: 10px; justify-items: start; }
.ct-list { display: grid; gap: 4px; width: 100%; }
.ct-row { display: grid; gap: 2px 10px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ct-row.signed b { color: #2f7a43; } .ct-row.void { opacity: .55; }
.ct-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-grid label { display: grid; gap: 4px; font-size: 13px; color: #555; } .ct-grid .a-search { margin: 0; padding: 8px 10px; }
@media (max-width: 600px) { .ct-row { grid-template-columns: 1fr; } .ct-grid { grid-template-columns: 1fr; } }

/* gallery video: pick from the wedding's Files */
.v-src { display: flex; gap: 6px; }
.v-src .btn { flex: 1; justify-content: center; white-space: nowrap; }
.vpick { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 10px 0; display: grid; gap: 8px; }
.vp-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vp-h .sp { flex: 1; }
.vp-list { display: grid; gap: 4px; max-height: 280px; overflow: auto; }
.vp-f { display: flex; align-items: center; gap: 10px; text-align: start; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--soft, #f5f5f3); font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.vp-f:hover { border-color: var(--fg); }
.vp-f .ic { font-size: 11px; opacity: .6; }
.vp-f .nm { flex: 1; display: grid; }
.vp-f small { color: var(--muted); font-size: 11px; }
.vp-f .n { color: var(--muted); font-size: 12px; }

/* dates read day.month.year: a date field in a right-to-left page can show the year first (Safari) */
input[type="date"], input[type="datetime-local"] { direction: ltr; text-align: right; }

/* the couple's cover choices, as sent on WhatsApp */
.cv-order { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.cv-order h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.cv-order pre { white-space: pre-wrap; font: inherit; font-size: 13px; line-height: 1.7; background: var(--soft, #f6f5f2); border-radius: 10px; padding: 12px; margin: 0 0 8px; }
.cv-order-btns { display: flex; gap: 6px; }

/* ---- the upload card: one for galleries and files, fixed at the bottom, survives page changes ---- */
.upbar { position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; transform: translateY(140%); opacity: 0; transition: transform .25s var(--ease, ease), opacity .2s; }
.upbar.on { transform: none; opacity: 1; }
.upbar-in { pointer-events: auto; width: 100%; max-width: 640px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.16); padding: 12px 14px; display: grid; gap: 8px; }
.upbar-top { display: flex; align-items: center; gap: 10px; }
.upbar-t { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upbar-pct { font-variant-numeric: tabular-nums; color: #555; }
.upbar-x { font: inherit; font-size: 13px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.upbar-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.upbar-bar i { display: block; height: 100%; width: 0; background: var(--fg); transition: width .6s var(--ease, ease); }
.upbar.done .upbar-bar i { background: #2f7a52; } .upbar.bad .upbar-bar i { background: #b3362c; }
.upbar-txt { font-size: 13px; color: #555; font-variant-numeric: tabular-nums; }
.upbar-t .seg, .upbar-txt .seg { unicode-bidi: isolate; white-space: nowrap; } .upbar-txt .sep, .upbar-t .sep { color: #999; }
@media (prefers-reduced-motion: reduce) { .upbar { transition: opacity .15s; transform: none; } .upbar-bar i { transition: none; } }

/* ---- CRM: a grid like the Airtable one on a computer, cards on a phone; the record as overview + tabs ---- */
.ui-grid { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid var(--line); background: #fff; border-radius: 10px; }
.ui-tbl { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.ui-tbl th, .ui-tbl td { padding: 8px 10px; border-bottom: 1px solid #eee; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.ui-tbl thead th { position: sticky; top: 0; z-index: 2; background: #f7f7f5; font-weight: 500; color: #555; cursor: pointer; user-select: none; }
.ui-tbl thead th:hover { color: var(--fg); }
.ui-tbl .ui-first, .ui-tbl thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: #fff; font-weight: 500; }
.ui-tbl thead th:first-child { z-index: 3; background: #f7f7f5; }
.ui-tbl tbody tr[data-id] { cursor: pointer; }
.ui-tbl tbody tr[data-id]:hover td { background: #f6f8fb; }
.ui-tbl .ui-month td { background: #faf9f6; color: #7a7a7a; font-size: 11px; letter-spacing: .08em; padding: 5px 10px; position: sticky; inset-inline-start: 0; }
.ui-tbl .at-chip { margin-inline-end: 0; }
.ui-rows { display: none; }
@media (max-width: 699px) { .ui-grid { display: none; } .ui-rows { display: grid; } }
.at-sheet-in { width: min(780px, 100%); }
.rs-tabs { position: sticky; top: 57px; z-index: 4; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; background: #fff; border-bottom: 1px solid var(--line); margin: 0 -20px 14px; padding: 0 20px; }
.rs-tabs button { font: inherit; font-size: 13px; border: 0; background: none; padding: 10px 12px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.rs-tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
.rs-panel .crm-card { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rec-s { margin-bottom: 18px; } .rec-s h3 { font-size: 12px; letter-spacing: .08em; color: #888; margin: 0 0 8px; font-weight: 500; }
.at-acts-b { display: grid; gap: 8px; }
.at-acts-g { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.at-acts-g > span { font-size: 11px; color: #888; min-width: 36px; }

/* ---- dilemmas online: the Mac app's screen, for the phone ---- */
.dl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dl-stage { animation: fade .2s ease; }
.dl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.dl-look { display: inline-flex; padding: 3px; gap: 2px; border-radius: 99px; background: var(--soft); margin-bottom: 10px; }
.dl-look button { font: inherit; font-size: 13px; border: 0; background: none; padding: 6px 14px; border-radius: 99px; color: #666; cursor: pointer; min-height: 32px; }
.dl-look button[aria-pressed="true"] { background: #fff; color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.dl-bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 14px; } .dl-bar i { display: block; height: 100%; background: var(--fg); }
.dl-incam { background: #e6f3ec; color: #2f6b4a; padding: 8px 12px; border-radius: 8px; margin: 0 0 10px; font-size: 14px; }
.dl-note { background: #fff4e0; color: #7a4d00; padding: 8px 12px; border-radius: 8px; margin: 0 0 10px; font-size: 14px; }
.dl-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-grid.n3, .dl-grid.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .dl-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dl-grid.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dl-ph { all: unset; display: flex; flex-direction: column; gap: 6px; padding: 5px; border-radius: 12px; background: #fff; border: 1px solid var(--line); cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .1s; }
.dl-ph:active { transform: scale(.985); }
.dl-ph.keep { border-color: #2f7a52; box-shadow: 0 0 0 2px #2f7a52; }
.dl-img { display: block; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: var(--soft); }
.dl-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dl-ph:not(.keep) .dl-img img { filter: saturate(.85); opacity: .9; }
.dl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; min-height: 22px; padding: 0 2px; }
.dl-tags b { font-weight: 600; min-width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 5px; background: var(--soft); font-size: 11px; }
.dl-tags i { font-style: normal; padding: 1px 7px; border-radius: 99px; background: var(--soft); color: #666; }
.dl-tags i.m { color: #9a5b3c; } .dl-tags i.y { color: #2f7a52; } .dl-tags i.n { color: #b3362c; }
.dl-keep { margin-inline-start: auto; color: #2f7a52; font-weight: 600; opacity: 0; transition: opacity .15s; } .dl-ph.keep .dl-keep { opacity: 1; }
.dl-stage h3 { font-size: 13px; color: #666; margin: 16px 0 6px; font-weight: 500; }
.dl-stage [data-note] { margin-top: 10px; }
.dl-tie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.dl-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; position: sticky; bottom: 0; background: var(--bg, #f5f4f1); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
@keyframes fade { from { opacity: 0; } }

.dl-cell { position: relative; display: flex; flex-direction: column; }
.dl-cell .dl-ph { flex: 1; }
.dl-bw { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 4px 9px; border-radius: 99px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.45); color: #fff; cursor: pointer; }
.dl-bw.on { background: #111; border-color: #fff; box-shadow: 0 0 0 2px #fff; }
.dl-cell:has(.dl-bw.on) .dl-img img { filter: grayscale(1); }
@media (max-width: 699px) { .dl-img { aspect-ratio: auto; max-height: 60vh; } .dl-img img { height: auto; max-height: 60vh; } }   /* a portrait photo gets its height on a phone */

/* installed on the phone's home screen: keep the top bar clear of the clock and the notch */
@media (display-mode: standalone) { .a-top { padding-top: env(safe-area-inset-top); } .a-top-in { min-height: 52px; } }

/* a transfer's recipient */
.gd-contact { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; font-size: 13px; }
.ct-sug { position: absolute; top: 100%; inset-inline: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: none; max-height: 260px; overflow: auto; }
.ct-sug.open { display: grid; }
.ct-sug button { display: flex; justify-content: space-between; gap: 12px; text-align: start; padding: 9px 12px; border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; color: var(--fg); }
.ct-sug button:hover, .ct-sug button.on { background: #f4f3f0; }
.ct-sug span { color: var(--muted); font-size: 13px; }

/* transfer recipients */
.gd-rcps { display: grid; gap: 4px; }
.gd-rcp { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .gd-rcp b { font-weight: 500; }
.gd-rcp-ed { display: grid; gap: 6px; } .gd-rcp-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; position: relative; }

/* uploads running on another device: small live cards at the top, on every admin page */
.lv { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; right: 0; z-index: 59; display: none; flex-direction: column-reverse; align-items: center; gap: 6px; padding: 0 12px; pointer-events: none; }
@media (max-width: 699px) { .lv { bottom: calc(84px + env(safe-area-inset-bottom)); } }   /* above the "+ חדש" button */
.lv.on { display: flex; }
.lv-card { pointer-events: none; width: 100%; max-width: 440px; opacity: .96; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 8px 12px; display: grid; gap: 4px; font-size: 12px; }
.lv-card.done .upbar-bar i { background: #2e7d32; }
.lv-card.bad .upbar-bar i { background: #b3261e; }
.upbar-bar.busy i { background: repeating-linear-gradient(-45deg, var(--fg) 0 10px, #555 10px 20px); background-size: 28px 28px; animation: lv-move 1s linear infinite; opacity: .5; }
@keyframes lv-move { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .upbar-bar.busy i { animation: none; } }
.upbar-act { justify-self: start; }
.gd-alert.pend { display: grid; gap: 6px; margin-bottom: 14px; border-color: #e0b24d; background: #fff8e6; }

.rcp-st { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--soft); color: #666; white-space: nowrap; }
.rcp-st.ok { background: #e6f3ec; color: #2f7a52; } .rcp-st.bad { background: #fbeaea; color: #b3362c; } .rcp-st.wait { background: #fff4e0; color: #7a4d00; }

/* inside the studio app (/admin?embed=1): the app's header and tabs are around it */
html.embed .a-nav, html.embed .a-top .menu, html.embed .a-top .acc { display: none !important; }
html.embed .a-top h1 { font-size: 16px; }

/* the in-camera 5★ of a dilemma's moment, shown small and locked (22.10.2026) */
.dl-locked { margin: 4px 0 10px; } .dl-locked summary { cursor: pointer; list-style: none; } .dl-locked summary::-webkit-details-marker { display: none; } .dl-locked[open] summary u { display: none; }
.dl-lstrip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.dl-lstrip img { height: 72px; width: auto; border-radius: 6px; outline: 2px solid #2f7a52; outline-offset: -2px; flex: none; }

/* after the dilemmas: duplicates beside their twin, a lone reject between its neighbours (23.10.2026) */
.dl-endh{font-size:17px;margin:10px 0 4px}
.dl-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:10px 0}
.dl-pair{display:grid;grid-template-columns:3fr 2fr;gap:6px;align-items:center}
.dl-twin{position:relative;opacity:.75}.dl-twin img,.dl-ctx img{width:100%;display:block;border-radius:8px}
.dl-twin i,.dl-ctx i{position:absolute;bottom:4px;inset-inline-start:4px;font-style:normal;font-size:11px;background:rgba(0,0,0,.55);color:#fff;padding:1px 6px;border-radius:6px}
.dl-around{display:grid;grid-template-columns:1fr 2.2fr 1fr;gap:8px;align-items:center;margin:10px 0}
.dl-around .dl-img img{width:100%;display:block;border-radius:10px}.dl-ctx{position:relative;opacity:.8}
.dl-lonely{display:flex;flex-direction:column;gap:12px;margin:10px 0}

.card-a.over .vdrop{border-color:var(--fg)}
.vdrop{margin:12px 0 4px;padding:22px 12px}
.gd-days{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 10px}.gd-days .mini.on{background:var(--fg);color:var(--bg,#fff);border-color:var(--fg)}

/* post builder v2 (5.11.2026): layouts, styles, filters */
.so-sg { grid-template-columns: 150px 1fr auto; cursor: pointer; align-items: center; }
.so-sg [data-ai] { grid-row: span 2; white-space: nowrap; }
.so-sg-th { display: flex; gap: 3px; } .so-sg-th canvas { width: 34px; height: 42px; background: #eee; }
.so-filt { margin: 4px 0 6px; }
.so-ph.pt img { object-position: center 30%; }
.so-sl { flex: 0 0 64px; cursor: grab; } .so-sl canvas { width: 100%; aspect-ratio: 4/5; display: block; background: #eee; cursor: pointer; }
.so-sl.drag { opacity: .4; } .so-sl.over { border-color: #f2c200; }
.so-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 10px; }
.so-lay { display: flex; gap: 4px; } .so-lb { padding: 4px 6px; border: 1px solid var(--line); background: #fff; color: #555; cursor: pointer; line-height: 0; }
.so-lb.on { border-color: #1a1a1a; color: #1a1a1a; background: #f4f3f0; }
.so-tg { display: flex; gap: 4px; flex-wrap: wrap; } .so-tg .mini.on { background: #1a1a1a; color: #fff; }
.so-mode { justify-content: center; align-items: center; }
.so-crop canvas { width: min(100%, 400px); }