/* DisplayMe v1.15 — Liquid Glass: white and gray, translucent panels, blur, bright edges. Loaded after style.css and the admin page styles. */
:root, :root:not([data-x]) {
  --bg: #dedfe4; --surface: rgba(255,255,255,.58); --surface-2: rgba(255,255,255,.34); --border: rgba(255,255,255,.75);
  --text: #1d1d1f; --muted: #55585f; --accent: #1d1d1f; --accent-ink: #ffffff; --accent-soft: rgba(255,255,255,.78);
  --shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(60,64,80,.16); --radius: 24px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root, :root:not([data-x]) {
    --bg: #dedfe4; --surface: rgba(255,255,255,.58); --surface-2: rgba(255,255,255,.34); --border: rgba(255,255,255,.75);
    --text: #1d1d1f; --muted: #55585f; --accent: #1d1d1f; --accent-ink: #ffffff; --accent-soft: rgba(255,255,255,.78);
    --danger: #d23b3f; --danger-soft: #fdecec; --warn: #b26b00; --warn-soft: #fff4de; --ok: #1a9a57; --ok-soft: #e4f6ec;
    --shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(60,64,80,.16); color-scheme: light;
  }
}
/* Fonts: SF Pro for text and headings, SF Compact for small controls and labels, SF Mono for codes and IDs.
   Apple devices use the real SF fonts; other devices fall back to Inter / Segoe UI / Roboto (Khmer and Thai keep their Noto fonts). */
:root {
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Noto Sans Khmer", "Noto Sans Thai", Helvetica, Arial, sans-serif;
  --sf-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Noto Sans Khmer", "Noto Sans Thai", Helvetica, Arial, sans-serif;
  --sf-compact: "SF Compact Text", "SF Compact", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Noto Sans Khmer", "Noto Sans Thai", sans-serif;
  --sf-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
html { background: #dedfe4; }
body { font-family: var(--sf); background: #dedfe4; color: var(--text); }
/* the soft background lives on its own fixed layer so scrolling never repaints it */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0);
  background:
    radial-gradient(520px 520px at 6% 62%, rgba(141,147,160,.55), transparent 70%),
    radial-gradient(560px 460px at 72% -4%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(620px 620px at 104% 100%, rgba(95,100,112,.40), transparent 70%),
    radial-gradient(460px 460px at 42% 108%, rgba(170,176,188,.6), transparent 70%),
    linear-gradient(160deg, #f3f3f6 0%, #dedfe4 55%, #cbccd2 100%);
}
a { color: #1d1d1f; }

/* glass surfaces */
.card, .modal, .login {
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.26));
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.4), 0 14px 38px rgba(60,64,80,.18);
}
.modal { background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.55)); }
.modal-bg { background: rgba(60,64,80,.30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* buttons */
.btn {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.55)); border: 1px solid rgba(255,255,255,.9); color: #1d1d1f;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(60,64,80,.16); font-weight: 600; transition: transform .15s, background .15s;
}
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn.primary { background: linear-gradient(180deg, #4a4c53, #1d1d1f); border-color: rgba(255,255,255,.3); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(29,29,31,.32); }
.btn.primary:hover { background: linear-gradient(180deg, #55575f, #2a2b2f); filter: none; }
.btn.danger { color: var(--danger); }
.btn.sm.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }

/* inputs */
input[type=search], input[type=time], input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], select, textarea {
  background: rgba(120,124,136,.12); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 3px rgba(60,64,80,.18); color: #1d1d1f;
}
input:focus, select:focus { outline: 2px solid #1d1d1f; outline-offset: 1px; }
.drop { background: rgba(120,124,136,.1); border-color: rgba(60,64,80,.25); }
.drop.over { background: rgba(255,255,255,.8); border-color: #1d1d1f; }
.targets, .thumb { border-color: rgba(255,255,255,.7); }
.progress { background: rgba(120,124,136,.2); } .progress i { background: #1d1d1f; }
.switch i { background: rgba(120,124,136,.35); box-shadow: inset 0 1px 3px rgba(60,64,80,.3); }
.switch input:checked + i { background: linear-gradient(180deg, #4a4c53, #1d1d1f); }
.badge, .role, .ver { background: rgba(255,255,255,.7); border-color: #fff; color: var(--muted); }
.role.owner { background: linear-gradient(180deg, #4a4c53, #1d1d1f); color: #fff; }
.toast { background: rgba(29,29,31,.92); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* admin shell */
#appView {
  background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid rgba(255,255,255,.8); box-shadow: inset 0 1px 0 #fff, 0 30px 80px rgba(60,64,80,.22);
}
.side { background: rgba(255,255,255,.34); border-right: 1px solid rgba(255,255,255,.7); }
.work { background: transparent; }
.logo i { background: linear-gradient(180deg, #4a4c53, #1d1d1f); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px rgba(29,29,31,.35); }
nav button { color: #3c3e44; }
nav button:hover { background: rgba(255,255,255,.6); color: #1d1d1f; }
nav button.active { background: linear-gradient(180deg, #fff, rgba(255,255,255,.7)); color: #1d1d1f; box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(60,64,80,.16); }
.me { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.8); }
.me .av { background: linear-gradient(180deg, #7b7f8b, #3a3c42); color: #fff; }
.tsearch input { background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.85); box-shadow: inset 0 1px 3px rgba(60,64,80,.14), 0 6px 16px rgba(60,64,80,.1); }
.iconbtn { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.55)); box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(60,64,80,.16); }
.iconbtn:hover { background: #fff; color: #1d1d1f; }
tbody tr:hover td { background: rgba(255,255,255,.5); }
th { color: var(--muted); }
th, td { border-bottom-color: rgba(255,255,255,.7); }
.stat.t-screens { --tint: #3c3e44; --tint-bg: rgba(255,255,255,.75); }
.stat.t-stores { --tint: #3c3e44; --tint-bg: rgba(255,255,255,.75); }
.stat.t-wait { --tint: #3c3e44; --tint-bg: rgba(255,255,255,.75); }
.stat.t-online { --tint: #1a9a57; --tint-bg: rgba(255,255,255,.75); }
.stat.hero { background: linear-gradient(160deg, #55575f 0%, #1d1d1f 100%); color: #fff; border-color: rgba(255,255,255,.3) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 16px 34px rgba(29,29,31,.35); }
.stat.hero .lbl, .stat.hero > div > span:last-child { color: rgba(255,255,255,.82); }
.stat.hero > i { background: rgba(255,255,255,.2); color: #fff; }
@media (max-width: 880px) { .side { background: rgba(255,255,255,.55); } }

h1, h2, h3, .head h1, .logo, .stat b { font-family: var(--sf-display); }
.badge, .ver, .role, .btn.sm, .grp, th, small, .hint, label.field small, .kv dt, .meta, .toast { font-family: var(--sf-compact); }
code, pre, kbd, samp, .code, td code, .howto code, .linkbox input, .tag-mono { font-family: var(--sf-mono); }

/* ===== layout fixes (v1.15.2) ===== */
main > .card + .card:not([style*="margin-top"]) { margin-top: 16px; }          /* stacked cards never touch */
.row2 > *, .row2 input, .row2 select { min-width: 0; }                            /* date fields stay inside their card */
.upload input[type=date], .upload input[type=time], .upload input[type=number] { width: 100%; min-width: 0; }
.filter input[type=date], .filter input[type=time] { width: auto; min-width: 150px; }
.filter .to, .filter > span.muted { white-space: nowrap; }
input[type=search], input[type=time], input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], select { min-height: 46px; }
.inline-form { align-items: flex-end; }
nav button:focus { outline: none; }
nav button:focus-visible, .btn:focus-visible, .iconbtn:focus-visible { outline: 2px solid rgba(29,29,31,.55); outline-offset: 2px; }
.card.settings, .card.upload, .card.howto { padding: 20px; }
.howto { gap: 18px; }
@media (max-width: 600px) {
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 10px; font-size: 12.5px; }
  .kv dd { word-break: normal; overflow-wrap: anywhere; }
}
@media (max-width: 880px) {
  .work, main { min-width: 0; max-width: 100%; }
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-card table { min-width: 640px; }
  .topbar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px 10px; }
  .topbar .hello { min-width: 0; }
  .tsearch { grid-column: 1 / -1; order: 0; }
  .hello h2 { font-size: 19px; }
  .filter { gap: 8px; }
  .filter select, .filter input[type=search] { min-width: 0; flex: 1 1 140px; }
}
@media (max-width: 880px) {
  .topbar .hello { grid-column: 1; grid-row: 1; }
  .topbar #bell { grid-column: 2; grid-row: 1; }
  .topbar .ver { grid-column: 3; grid-row: 1; }
  .topbar .tsearch { grid-column: 1 / -1; grid-row: 2; }
}
/* status dot: big, no text */
.dot { width: 18px; height: 18px; margin-right: 0; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.18); }
.dot.on { background: #22c55e; box-shadow: 0 0 0 1px rgba(34,197,94,.35), 0 0 10px rgba(34,197,94,.55); }
.dot.off { background: #ef4444; box-shadow: 0 0 0 1px rgba(239,68,68,.35), 0 0 10px rgba(239,68,68,.45); }
/* smooth scrolling: blur is expensive, so it is kept only on big top-level panels, not on every list row */
#appView { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.30); }
.card.media, .card.stat:not(.hero), .card.howto, .card .card, .modal .card {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(60,64,80,.12);
}
.card.media { content-visibility: auto; contain-intrinsic-size: auto 120px; }
.thumb img, .thumb video { transform: translateZ(0); }
.side { -webkit-backdrop-filter: none; backdrop-filter: none; }
html { scroll-behavior: auto; }

/* ---------- glass dropdown (select.js) ---------- */
.cs { position: relative; display: block; width: 100%; min-width: 0; }
.filter .cs, .inline-form > .cs { display: inline-block; width: auto; min-width: 220px; }
@media (max-width: 880px) { .filter .cs { min-width: 0; flex: 1 1 140px; } }
.cs-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px !important; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; }
.cs-btn {
  width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer;
  padding: 10px 16px; border-radius: 14px; font: inherit; color: #1d1d1f;
  background: rgba(120,124,136,.12); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 3px rgba(60,64,80,.18);
}
.cs-btn:hover { background: rgba(120,124,136,.18); }
.cs-btn:focus-visible { outline: 2px solid rgba(29,29,31,.6); outline-offset: 2px; }
.cs-btn.is-open { background: rgba(255,255,255,.8); }
.cs-btn.ph .cs-label { color: #6b6e75; }
.cs-btn:disabled { opacity: .55; cursor: not-allowed; }
.cs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chev { flex: none; transition: transform .15s; }
.cs-btn.is-open .cs-chev { transform: rotate(180deg); }
.cs-pop {
  position: fixed; z-index: 200; overflow-y: auto; padding: 8px; border-radius: 22px; box-sizing: border-box;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(246,247,250,.82));
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 18px 44px rgba(40,44,60,.28);
  font-family: var(--sf); animation: csin .12s ease-out; overscroll-behavior: contain;
}
@keyframes csin { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.cs-pop::-webkit-scrollbar { width: 10px; }
.cs-pop::-webkit-scrollbar-thumb { background: rgba(110,114,126,.55); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.cs-opt { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; cursor: pointer; font-size: 15.5px; color: #1d1d1f; }
.cs-opt + .cs-opt { margin-top: 2px; }
.cs-opt:hover, .cs-opt.hot { background: rgba(120,124,136,.14); }
.cs-opt.sel { background: #dbe6ff; }
.cs-opt.dis { opacity: .4; cursor: not-allowed; }
.cs-box { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(120,124,136,.16); border: 1px solid rgba(255,255,255,.8); }
.cs-opt.sel .cs-box { background: #3b6df0; border-color: #3b6df0; }
.cs-tick { opacity: 0; }
.cs-opt.sel .cs-tick { opacity: 1; }
.cs-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-grp { padding: 8px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b6e75; }
.card.stat.hero { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- glass calendar and clock (picker.js) ---------- */
.filter .cs.pk { min-width: 160px; }
.pk-pop { width: 320px; padding: 14px 14px 10px; overflow: visible; max-height: none; border-radius: 26px; }
.pk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pk-title { border: 0; background: transparent; font: 700 17px var(--sf-display); letter-spacing: -.01em; color: #1d1d1f; padding: 6px 10px; border-radius: 12px; cursor: pointer; }
.pk-title:hover { background: rgba(120,124,136,.14); }
.pk-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.9); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); box-shadow: 0 3px 8px rgba(60,64,80,.14); font-size: 22px; line-height: 1; color: #1d1d1f; cursor: pointer; padding: 0 0 3px; }
.pk-nav:hover { background: #fff; }
.pk-dow, .pk-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.pk-dow span { text-align: center; font-size: 12px; font-weight: 600; color: #6b6e75; padding: 6px 0; }
.pk-grid { row-gap: 2px; }
.pk-d { position: relative; height: 40px; border: 0; background: transparent; font: 500 15px var(--sf); color: #1d1d1f; cursor: pointer; border-radius: 50%; padding: 0; }
.pk-d:hover { background: rgba(120,124,136,.16); }
.pk-d.today { box-shadow: inset 0 0 0 1.5px rgba(59,109,240,.65); }
.pk-d.mid { background: #dbe6ff; border-radius: 0; }
.pk-d.rs { background: linear-gradient(90deg, transparent 50%, #dbe6ff 50%); border-radius: 0; }
.pk-d.re { background: linear-gradient(90deg, #dbe6ff 50%, transparent 50%); border-radius: 0; }
.pk-d.sel, .pk-d.sel2 { border-radius: 50%; }
.pk-d.sel { background: #3b6df0 !important; color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(59,109,240,.4); }
.pk-d.sel2 { background: #9db8f7 !important; color: #fff; font-weight: 700; }
.pk-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 0; }
.pk-mo { height: 46px; border-radius: 16px; border: 1px solid rgba(255,255,255,.9); background: rgba(120,124,136,.1); font: 600 15px var(--sf); color: #1d1d1f; cursor: pointer; }
.pk-mo:hover { background: rgba(120,124,136,.2); }
.pk-mo.on { background: #3b6df0; color: #fff; border-color: #3b6df0; }
.pk-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(120,124,136,.2); }
.pk-link { border: 0; background: transparent; font: 600 14px var(--sf); color: #3b6df0; padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.pk-link:hover { background: rgba(59,109,240,.1); }
.pk-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pk-col { height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 2px; scrollbar-width: none; overscroll-behavior: contain; }
.pk-col::-webkit-scrollbar { display: none; }
.pk-t { flex: none; height: 40px; border: 0; border-radius: 14px; background: transparent; font: 500 16px var(--sf); color: #1d1d1f; cursor: pointer; }
.pk-t:hover { background: rgba(120,124,136,.16); }
.pk-t.sel { background: #3b6df0; color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(59,109,240,.35); }
@media (max-width: 400px) { .pk-pop { width: calc(100vw - 16px); } }

/* ---------- calendar v2: clear frosted glass, dark selection ---------- */
.pk-pop {
  width: 344px; padding: 20px 18px 12px; border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(236,238,243,.42));
  -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%);
  border: 1.5px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.5), 0 26px 60px rgba(40,44,60,.32);
}
.pk-head { margin: 0 2px 10px; }
.pk-title { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px; font: 700 15px var(--sf-display); letter-spacing: .12em; text-transform: uppercase; color: #1d1d1f; }
.pk-title svg { opacity: .55; transition: transform .15s; }
.pk-navs { display: flex; gap: 8px; }
.pk-nav { width: 34px; height: 34px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(60,64,80,.12); }
.pk-dow span { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: rgba(60,62,68,.55); }
.pk-grid { row-gap: 4px; }
.pk-d { height: 42px; font: 500 17px var(--sf); }
.pk-d:hover { background: rgba(255,255,255,.65); }
.pk-d.today { box-shadow: inset 0 0 0 1.5px rgba(29,29,31,.55); }
.pk-d.mid { background: rgba(29,29,31,.10); }
.pk-d.rs { background: linear-gradient(90deg, transparent 50%, rgba(29,29,31,.10) 50%); }
.pk-d.re { background: linear-gradient(90deg, rgba(29,29,31,.10) 50%, transparent 50%); }
.pk-d.sel { background: linear-gradient(180deg, #4a4c53, #1d1d1f) !important; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(29,29,31,.38); }
.pk-d.sel2 { background: rgba(29,29,31,.45) !important; color: #fff; box-shadow: none; }
.pk-mo { background: rgba(255,255,255,.5); }
.pk-mo.on { background: linear-gradient(180deg, #4a4c53, #1d1d1f); border-color: #1d1d1f; }
.pk-foot { border-top: 1px solid rgba(60,64,80,.14); }
.pk-link { color: #1d1d1f; }
.pk-link:hover { background: rgba(255,255,255,.7); }
.pk-t:hover { background: rgba(255,255,255,.65); }
.pk-t.sel { background: linear-gradient(180deg, #4a4c53, #1d1d1f); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px rgba(29,29,31,.35); }
@media (max-width: 400px) { .pk-pop { width: calc(100vw - 16px); } }
.pk-d.today { box-shadow: none; }
.pk-d.today::after { content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(29,29,31,.55); pointer-events: none; }
.pk-d.sel.today::after { box-shadow: none; }

/* ---------- performance: no live blur on page content ---------- */
.card, .modal, .login, #appView, .side, .table-card, .card.settings, .card.upload {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.card, .login { background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.66)); box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(60,64,80,.12); }
.modal { background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(250,250,252,.88)); }
#appView { background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(60,64,80,.14); }
.modal-bg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(60,64,80,.38); }
.table-card, .card.media { content-visibility: auto; contain-intrinsic-size: auto 200px; }
tbody tr { transition: none; }
.pk-hint { text-align: center; font-size: 13px; color: #55585f; margin-top: 6px; }

.inline-form label.field .cs { display: block; width: 100%; min-width: 0; }
.inline-form { gap: 14px; }
.inline-form .btn.primary { flex: none; min-height: 46px; }
label.field > span.cs { margin-bottom: 0; font-size: inherit; font-weight: inherit; }

/* ---------- file chooser ---------- */
input[type=file] { font: inherit; font-size: 14px; color: #55585f; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 2px 0 !important; min-height: 0 !important; width: 100%; cursor: pointer; }
input[type=file]::file-selector-button {
  margin-right: 12px; padding: 10px 20px; border-radius: 999px; cursor: pointer; font: 600 14px var(--sf);
  color: #1d1d1f; border: 1px solid rgba(255,255,255,.95);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.6));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.5), 0 6px 14px rgba(60,64,80,.16);
  transition: transform .12s, box-shadow .12s, background .12s;
}
input[type=file]:hover::file-selector-button { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(60,64,80,.22); }
input[type=file]:active::file-selector-button { transform: scale(.97); }
input[type=file]:focus-visible { outline: 2px solid rgba(29,29,31,.55); outline-offset: 3px; border-radius: 999px; }
input[type=file]::-webkit-file-upload-button { margin-right: 12px; padding: 10px 20px; border-radius: 999px; font-weight: 600; border: 1px solid rgba(255,255,255,.95); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.6)); box-shadow: 0 6px 14px rgba(60,64,80,.16); }
.drop { transition: background .15s; }
.drop:hover { background: rgba(255,255,255,.35); }

/* ---------- content list rows ---------- */
.media { grid-template-columns: 30px 168px 1fr auto; gap: 18px; padding: 14px 16px; }
.media .mi { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.media h3 { font: 650 17px/1.25 var(--sf-display); letter-spacing: -.01em; margin: 0; }
.media .meta { gap: 6px 8px; font-size: 13px; }
.mi-i { display: inline-flex; align-items: center; gap: 6px; color: #55585f; font-size: 13.5px; }
.mi-ic { flex: none; opacity: .75; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 12.5px var(--sf-compact); color: #3c3e44; background: rgba(120,124,136,.14); border: 1px solid rgba(255,255,255,.85); }
.chip.ok { background: rgba(34,197,94,.14); color: #167a3f; }
.media .meta.foot { padding-top: 2px; }
.thumb { width: 168px; border-radius: 14px; box-shadow: 0 6px 14px rgba(60,64,80,.18); }
.thumb .kind { left: 8px; bottom: 8px; font: 600 11.5px var(--sf-compact); padding: 3px 8px; border-radius: 999px; background: rgba(29,29,31,.72); }
@media (max-width: 700px) {
  .media { grid-template-columns: 112px 1fr; gap: 12px 14px; padding: 12px; align-items: start; }
  .thumb { width: 112px; }
  .media h3 { font-size: 16px; }
  .media .acts { padding-top: 4px; border-top: 1px solid rgba(60,64,80,.1); }
}
.mi-i, .chip, .media .badge { white-space: nowrap; }
.media .meta.foot .mi-i { margin-right: 2px; }
@media (min-width: 701px) { .media { grid-template-columns: 30px 150px minmax(0, 1fr) auto; } .thumb { width: 150px; } .media .acts { max-width: 200px; } }

/* ---------- row actions: two tidy lines, right aligned ---------- */
.media .acts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: none; flex-wrap: nowrap; }
.media .acts .ar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.media .acts .ar:first-child { gap: 10px; }
.media .acts .btn.sm { min-height: 34px; padding: 0 16px; }
.media .acts .btn.sm.sq { width: 36px; padding: 0; display: inline-grid; place-items: center; }
.media .acts .switch { margin-right: 4px; }
@media (min-width: 701px) { .media .acts { max-width: none; } }
@media (max-width: 700px) {
  .media .acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
  .media .acts .ar { justify-content: flex-start; }
}

/* ---------- bulk action bar (appears when files are ticked) ---------- */
.bulkbar { position: sticky; top: 10px; z-index: 8; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,245,248,.92)) !important; box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(40,44,60,.22) !important; }
.bulkbar .bn { font: 700 15px var(--sf-display); padding: 4px 12px; border-radius: 999px; background: linear-gradient(180deg, #4a4c53, #1d1d1f); color: #fff; margin-right: 4px; }
.bulkbar .btn.sm { min-height: 34px; padding: 0 14px; }
.sidever { margin-top: 8px; text-align: center; font: 500 12px var(--sf-compact); color: #6b6e75; display: flex; align-items: center; justify-content: center; gap: 6px; }
@media (max-width: 880px) { .sidever { display: none; } }

/* greeting: big hello, small tagline */
.hello h2 { font: 700 26px/1.2 var(--sf-display); letter-spacing: -.02em; margin: 0 0 3px; }
.hello small { display: block; font-size: 14px; color: #6b6e75; }
@media (max-width: 880px) { .hello h2 { font-size: 21px; } }

/* ---------- Telegram sign-in ---------- */
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; color: #6b6e75; font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(60,64,80,.18); }
.tgbtn { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; color: #1d1d1f; }
.tgbtn svg { color: #229ed9; }
#fSignin .tgbtn { margin: 0; }

/* version under the login card */
.lgver{margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--muted,#6b7280);letter-spacing:.2px}
.lgver span{font-weight:600}

/* search-and-tick pickers (stores, playlists) */
.picker { width: 100%; }
.pk-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2, #f1f1f3); font: inherit; color: inherit; cursor: pointer; }
.pk-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-panel { border: 1px solid var(--border); border-radius: 12px; margin-top: 6px; padding: 10px 12px; background: var(--surface, #fff); }
.pk-q { width: 100%; margin-bottom: 8px; }
.pk-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.pk-cnt { margin-left: auto; font-size: 12px; }
.pk-all, .pk-row { display: flex; gap: 10px; align-items: center; padding: 7px 2px; font-weight: 400; cursor: pointer; }
.pk-all { border-bottom: 1px solid var(--border); font-weight: 600; }
.pk-list { max-height: 240px; overflow: auto; }
.pk-lbl { flex: 1; }
.pk-none { padding: 8px 2px; font-size: 13px; }
.picker input[type=checkbox] { width: auto; }

/* Activity: one line per row; long details are cut with "…" and open in a pop-up on click */
.table-card td.clip{max-width:0;width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-card tr.rowv{cursor:pointer}
.table-card tr.rowv:hover td{background:rgba(120,130,150,.08)}
.viewrow dl{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px 14px;margin:6px 0 14px}
.viewrow dt{color:var(--muted,#6a6e77)}
.viewrow dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}

/* the top bar (greeting, search, theme, bell) stays on screen on every page while the page scrolls */
@media (min-width: 881px){
  .topbar{position:sticky;top:0;z-index:7;background:color-mix(in srgb,var(--bg,#e9eaee) 93%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}

/* icon buttons in table rows (Stores: Preview = eye, Devices = TV with a count, Device control = gear) */
.btn.ib { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; position: relative; vertical-align: middle; }
.btn.ib .ico { width: 18px; height: 18px; }
.btn.ib i { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--text, #1d1d1f); color: var(--bg, #fff); font: 600 11px/18px system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg, #fff); }

/* the picker list floats above everything (it is moved to the page while open) */
.pk-panel.pk-float { position: fixed; z-index: 400; margin: 0; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; border-radius: 16px; padding: 10px 12px 6px;
  background: linear-gradient(135deg, #fff, #f4f5f9); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 18px 44px rgba(40,44,60,.32); }
.pk-panel.pk-float .pk-list { flex: 1 1 auto; min-height: 120px; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.pk-panel.pk-float .pk-q, .pk-panel.pk-float .pk-bar, .pk-panel.pk-float .pk-all { flex: none; }
.pk-row { padding: 9px 8px; border-radius: 9px; } .pk-row:hover, .pk-all:hover { background: rgba(120,130,150,.12); }
.pk-btn.is-open { box-shadow: 0 0 0 2px rgba(80,120,255,.35); }
html[data-theme="dark"] .pk-panel.pk-float { background: linear-gradient(135deg, #262e40, #1a202e); border-color: rgba(255,255,255,.12); box-shadow: 0 18px 44px rgba(0,0,0,.6); }

/* notifications: centred at the top, green = done, red = problem */
#toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: min(560px, calc(100vw - 24px)); pointer-events: none; }
#toasts .toast { position: static !important; transform: none !important; left: auto !important; bottom: auto !important; display: flex; align-items: center; gap: 10px; padding: 11px 18px 11px 12px; border-radius: 14px !important; color: #fff !important; font-size: 14px; font-weight: 600; line-height: 1.35; box-shadow: 0 12px 30px rgba(0,0,0,.28); animation: tin .22s ease-out; }
#toasts .toast.ok { background: linear-gradient(135deg, #22b866, #14964d) !important; }
#toasts .toast.err { background: linear-gradient(135deg, #e5484d, #c4282d) !important; }
#toasts .toast.out { opacity: 0; transform: translateY(-8px) !important; transition: opacity .25s, transform .25s; }
#toasts .toast .ti { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
@keyframes tin { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* setup wizard for new companies */
#wiz { position: fixed; inset: 0; z-index: 80; background: rgba(12,14,22,.6); display: grid; place-items: center; padding: 16px; overflow: auto; }
.wz-panel { position: relative; width: min(1000px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #f4f6fa; color: #1d1d1f; border-radius: 22px; padding: 26px 28px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.wz-panel h2 { text-align: center; font-size: 24px; margin: 4px 36px 22px; }
.wz-x { position: absolute; right: 16px; top: 14px; border: 0; background: transparent; color: #6b6e76; cursor: pointer; font-size: 13px; }
.wz-x:hover { color: #1d1d1f; }
.wz-lead { font-size: 16px; line-height: 1.55; color: #3b3e45; margin: 0 0 14px; }
.wz-one { max-width: 560px; margin: 0 auto; padding-bottom: 8px; }
.wz-two { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.wz-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wz-card { background: #fff; border-radius: 18px; padding: 20px 18px; text-align: center; box-shadow: 0 4px 16px rgba(60,64,80,.08); min-height: 100%; }
.wz-card h3 { margin: 6px 0 4px; font-size: 18px; } .wz-card .muted { color: #6b6e76; font-size: 14px; }
.wz-or { color: #6b6e76; font-weight: 600; }
.wz-ico { display: flex; justify-content: center; margin: 10px 0; }
.wz-tv { width: 150px; height: 92px; background: #44474e; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #4fd1a1; }
.wz-tv b { font-size: 24px; letter-spacing: .12em; font-weight: 500; } .wz-tv small { color: #bbb; font-size: 10px; margin-top: 4px; }
.wz-url { font-family: ui-monospace, Menlo, monospace; font-size: 14px; background: #eef0f5; border-radius: 10px; padding: 10px 12px; margin: 8px 0 12px; word-break: break-all; }
.wz-list { text-align: left; font-size: 14px; color: #3b3e45; padding-left: 20px; margin: 12px 0 0; line-height: 1.55; }
.wz-form { text-align: left; } .wz-form .btn { width: 100%; margin-top: 6px; }
.wz-card .btn.primary, .wz-one .btn.primary { background: #2fa07a; border-color: #2fa07a; color: #fff; }
.wz-done { color: #12733f; font-weight: 600; font-size: 14px; }
.wz-check { list-style: none; padding: 0; margin: 0 0 14px; } .wz-check li { padding: 8px 0 8px 32px; position: relative; color: #6b6e76; }
.wz-check li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c3c7d0; box-sizing: border-box; }
.wz-check li.on { color: #1d1d1f; font-weight: 600; } .wz-check li.on::before { background: #2fa07a; border-color: #2fa07a; }
.wz-check li.on::after { content: "✓"; position: absolute; left: 8px; top: 7px; color: #fff; font-size: 12px; }
.wz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wz-dots { display: flex; gap: 8px; } .wz-dots button { width: 11px; height: 11px; border-radius: 50%; border: 0; background: #c9ccd4; cursor: pointer; padding: 0; } .wz-dots button.ok { background: #8fd3bb; } .wz-dots button.on { background: #2fa07a; transform: scale(1.25); }
.wz-panel .field span { color: #3b3e45; } .wz-panel input, .wz-panel select { background: #fff; color: #1d1d1f; }
html[data-theme="dark"] .wz-panel { background: #1a1f2c; color: #e8ecf3; } html[data-theme="dark"] .wz-card { background: #232a3c; box-shadow: none; } html[data-theme="dark"] .wz-lead, html[data-theme="dark"] .wz-list, html[data-theme="dark"] .wz-panel .field span { color: #c3c8d4; } html[data-theme="dark"] .wz-url { background: #1a1f2c; } html[data-theme="dark"] .wz-check li.on, html[data-theme="dark"] .wz-x:hover { color: #fff; } html[data-theme="dark"] .wz-panel input, html[data-theme="dark"] .wz-panel select { background: #151a26; color: #e8ecf3; }
@media (max-width: 760px) { .wz-two, .wz-three { grid-template-columns: 1fr; } .wz-or { text-align: center; } .wz-panel { padding: 22px 16px 16px; } }

.ev-frame{display:block;width:100%;height:calc(100vh - 190px);min-height:560px;border:1px solid var(--line,#e3e6ec);border-radius:16px;background:transparent}

#main > .head { padding-top: 12px; }

.saved-tip { position: fixed; z-index: 300; width: 280px; max-height: 360px; overflow: hidden; padding: 12px 14px; border-radius: 16px; font-size: 13px; line-height: 1.35; pointer-events: none; color: #1d1d1f; background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(240,242,248,.97)); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 16px 40px rgba(20,24,40,.28); }
.saved-tip .st-h { margin-top: 8px; font-weight: 700; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; opacity: .7; }
.saved-tip .st-i { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="dark"] .saved-tip { color: #eef0f5; background: linear-gradient(135deg, #262e40, #1a202e); border-color: rgba(255,255,255,.14); }