@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap");

:root { --ink:#26202b; --muted:#6c6272; --line:#e3d9df; --bg:#faf7f9; --accent:#b4177a; --accent-deep:#8d1162; --ok:#1b7a55; --warn:#a15c00; --err:#b3261e; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "Figtree",ui-sans-serif,system-ui,sans-serif; }
a { color: var(--accent-deep); }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .8rem 1.25rem; background: #fff; border-bottom: 1px solid var(--line); }
.logo { color: var(--accent); font-size: 1.1rem; letter-spacing: -.02em; }
.logo span { color: var(--muted); font-weight: 500; }
.top nav { display: flex; gap: 1.1rem; flex: 1; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--muted); padding: .2rem 0; border-bottom: 2px solid transparent; }
.top nav a[aria-current] { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.logout { margin: 0; }
main { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
h1 { margin: .2rem 0 1rem; font-size: 1.5rem; letter-spacing: -.02em; }
h2 { margin: 2rem 0 .6rem; font-size: 1.1rem; }
.lead { color: var(--muted); max-width: 44rem; }
.muted, small { color: var(--muted); }
small { display: block; margin-top: .2rem; font-size: .85rem; }
code { background: #f0e8ee; padding: .05em .35em; border-radius: 4px; font-size: .9em; }

.btn { display: inline-block; padding: .55rem 1.1rem; font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--accent-deep); }
.btn.ghost { color: var(--accent-deep); background: #fff; border: 1px solid var(--line); }
.btn.danger-btn { background: var(--err); }
.linkbtn { padding: 0; font: inherit; color: var(--accent-deep); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.linkbtn.danger { color: var(--err); }
.iconbtn { width: 1.8rem; height: 1.8rem; padding: 0; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.iconbtn:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.panel { max-width: 44rem; padding: 1.25rem 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.panel.narrow { max-width: 24rem; }
.panel label { display: block; margin: 0 0 1rem; font-weight: 600; }
.panel label.inline { display: inline-flex; gap: .5rem; align-items: center; font-weight: 500; margin-right: 1.4rem; }
.panel h2:first-child { margin-top: 0; }
input, select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .5rem .65rem; font: inherit; color: var(--ink); background: #fff; border: 1px solid #cfc3cb; border-radius: 8px; }
input[type=checkbox] { display: inline-block; width: auto; margin: 0; }
textarea { resize: vertical; }
.actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; }

.flash { max-width: 44rem; margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 8px; background: #e6f4ee; color: #0f5238; }
.flash.err { background: #fbe9e7; color: #8a1c14; }

table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
th, td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-size: .85rem; color: var(--muted); background: #fdfafc; font-weight: 600; }
tr:last-child td { border-bottom: 0; }
tr.off td { opacity: .55; }
td.order form, td.row-actions form { display: inline-flex; gap: .3rem; margin: 0; }
td.row-actions { white-space: nowrap; }
td.row-actions > * { margin-right: .6rem; }
td small { display: block; }
.tag { display: inline-block; padding: 0 .45rem; font-size: .75rem; color: var(--ok); background: #e6f4ee; border-radius: 99px; }

.stats { display: flex; flex-wrap: wrap; gap: 1rem; }
.stats div { min-width: 9rem; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.stats b { display: block; font-size: 1.9rem; line-height: 1.1; letter-spacing: -.02em; }
.stats span { color: var(--muted); font-size: .85rem; }
.checks { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.checks li { display: flex; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.checks strong { flex: none; width: 3.6rem; font-size: .8rem; }
.checks .ok strong { color: var(--ok); }
.checks .warn strong { color: var(--warn); }

.searchbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.searchbar input { width: 20rem; max-width: 100%; margin: 0; }
.pager { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.details { display: grid; grid-template-columns: 11rem 1fr; gap: .5rem 1rem; max-width: 44rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.details dt { color: var(--muted); }
.details dd { margin: 0; }
.danger-zone { margin-top: 2rem; }

fieldset.cond { margin: 1.4rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; }
fieldset.cond legend { padding: 0 .4rem; font-weight: 600; }
.rule { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr auto; gap: .5rem; align-items: center; margin: .6rem 0; }
.rule select, .rule input { margin: 0; }
.rule .val { display: block; }
.checks-row { margin: 0 0 .4rem; }
@media (max-width: 40rem) { .rule { grid-template-columns: 1fr; } table { font-size: .9rem; } th, td { padding: .5rem; } .details { grid-template-columns: 1fr; } }

/* Live sales */
.card-live { padding: 1.1rem 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; max-width: 46rem; }
.now { font-size: 1.5rem; letter-spacing: -.01em; }
.now-num { display: inline-block; min-width: 2.2rem; padding: 0 .5rem; color: #fff; background: var(--accent); border-radius: 8px; text-align: center; }
.now-price { margin-left: .4rem; color: var(--accent-deep); font-weight: 700; }
.now-meta { margin: .3rem 0 0; color: var(--muted); }
.notice { padding: .6rem .8rem; background: #fff3dc; border-radius: 8px; color: #7a4a00; }
.controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.controls .jump { display: inline-flex; gap: .3rem; align-items: center; }
.controls .jump input { width: 3.4rem; margin: 0; }
.btn.big { padding: .8rem 1.6rem; font-size: 1.05rem; }
.tag.wait { color: #7a4a00; background: #fff3dc; }
.tag.off { color: var(--muted); background: #eee7ec; }
.bad { color: var(--err); }
table.items input { margin: 0; padding: .35rem .5rem; }
table.items tr.current td { background: #fdf0f8; }
.inline-del { margin: .4rem 0 1rem; display: flex; gap: .8rem; align-items: end; }
.inline-del label { margin: 0; font-weight: 500; }

.totals { margin: 0 0 .6rem; color: var(--muted); }
.totals strong { color: var(--ink); }

.qtyform { display: inline-flex; gap: .4rem; align-items: center; margin: 0 .5rem .2rem 0; }
.qtyform input { width: 3rem; margin: 0; padding: .25rem .4rem; }

/* payments */
.pay-attn td { background: #fffaf0; }
.cand { margin: .3rem 0 0; padding: 0; list-style: none; }
.cand li { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; padding: .4rem 0; border-top: 1px dashed var(--line); }
.cand li:first-child { border-top: 0; }
.cand .who { flex: 1 1 14rem; }
.tag.bad-tag { color: var(--err); background: #fbe9e7; }
input.copy { min-width: 16rem; font-size: .8rem; margin: 0; }
.sumline { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: .4rem 0 1rem; }
.sumline b { font-size: 1.15rem; }
.filters { display: flex; gap: 1rem; margin: 0 0 .8rem; }
.filters a[aria-current] { font-weight: 700; color: var(--ink); text-decoration: none; }
input.stale { background: #fff3dc; border-color: #d99a2b; }

/* Live page: two columns on wide screens */
.table-scroll { overflow-x: auto; }
.live-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 2rem; }
.live-banner { grid-column: 1 / -1; }
.live-banner:empty { display: none; }
.live-now { position: sticky; top: .75rem; z-index: 3; padding-bottom: .6rem; background: var(--bg); }
.live-now > p:first-child { margin-top: 0; }
.live-now .card-live { max-width: none; }
.live-feed > h2:first-child { margin-top: .2rem; }
.live-setup .panel, .live-setup .inline-del { max-width: none; }
.hidden-note { margin: 0 0 .5rem; font-size: .85rem; }
@media (max-width: 64rem) {
  .live-grid { display: flex; flex-direction: column; }
  .live-left { display: contents; }
  .live-banner { order: 0; }
  .live-now { order: 1; position: static; }
  .live-feed { order: 2; }
  .live-setup { order: 3; }
  .live-feed > h2:first-child { margin-top: 2rem; }
}

/* Header on phones: logo + log out on top, menu as one swipeable row */
@media (max-width: 48rem) {
  .top { flex-wrap: wrap; gap: .3rem 1rem; padding: .6rem 1rem 0; }
  .top .logo { order: 1; }
  .top .logout { order: 2; margin-left: auto; font-size: .9rem; }
  .top nav { order: 3; flex: 0 0 100%; flex-wrap: nowrap; gap: 1.2rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: .3rem 0 .1rem; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { flex: none; padding: .35rem 0 .45rem; }
}

/* Live page: equal columns, item boxes keep a usable width */
.live-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
table.items input { min-width: 3.6rem; }
table.items input[name^="item_name"] { min-width: 10rem; }
table.items input[name^="item_code"] { min-width: 6.5rem; }
table.items input[name^="item_price"] { min-width: 5rem; }

/* Live page: roomier page, tighter tables */
@media (min-width: 64.01rem) { main:has(#live-root) { max-width: 104rem !important; } }
.live-grid th, .live-grid td { padding: .5rem .55rem; }
table.items input { min-width: 3.2rem; }
table.items input[name^="item_name"] { min-width: 8.5rem; }
table.items input[name^="item_code"] { min-width: 5.5rem; }
table.items input[name^="item_price"] { min-width: 4.6rem; }
#p-claims td:first-child { min-width: 9.5rem; }
#p-claims td:nth-child(7) { white-space: nowrap; }
#p-claims .linkbtn { white-space: nowrap; }

/* Live page: claim filters, search, collapsible lists */
.claim-tools { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: 0 0 .7rem; }
.claim-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.claim-tabs button { font: inherit; font-size: .88rem; padding: .28rem .7rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 99px; cursor: pointer; }
.claim-tabs button b { margin-left: .15rem; font-weight: 600; color: var(--muted); }
.claim-tabs button[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.claim-tabs button[aria-pressed="true"] b { color: #fff; }
#claimSearch { flex: 1 1 12rem; max-width: 20rem; margin: 0; }
.feed-box { margin-top: 1.8rem; }
.feed-box > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; }
.feed-box > summary::-webkit-details-marker { display: none; }
.feed-box > summary::before { content: "\25B8"; color: var(--muted); transition: transform .15s; }
.feed-box[open] > summary::before { transform: rotate(90deg); }
.feed-box > summary h2 { display: inline; margin: 0; }
.feed-box > summary + * { margin-top: .6rem; }
.count-pill { display: inline-block; min-width: 1.7rem; padding: 0 .5rem; font-size: .8rem; font-weight: 600; text-align: center; color: var(--accent-deep); background: #f6e3ef; border-radius: 99px; }
.more-row { margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* Items table: stock per option, collapsible */
table.items tr.variant-row td { padding-top: 0; border-top: 0; }
.variant-box > summary { cursor: pointer; font-size: .85rem; color: var(--accent-deep); padding: .1rem 0 .35rem; }
.variant-box[open] > summary { font-weight: 600; }
table.variant-table { margin: .1rem 0 .5rem; font-size: .85rem; border-radius: 8px; }
table.variant-table th, table.variant-table td { padding: .3rem .55rem; }
table.variant-table tr.soldout td { color: var(--muted); }


/* AMCIETY Pay family styling for the seller workspace. */
:root { --ink:#26202b; --muted:#6c6272; --line:#e3d9df; --bg:#faf7f9; --accent:#b4177a; --accent-deep:#8d1162; --ok:#19734e; --warn:#9a590d; --err:#b3261e; }
body.seller-app { min-height:100vh; background:radial-gradient(circle at 90% -5%,#f6e1ec 0,transparent 32%),linear-gradient(145deg,#faf7f9 0%,#fff 60%,#fff5fa 100%); color:var(--ink); }
.app-sidebar { position:fixed; inset:0 auto 0 0; width:248px; z-index:10; display:flex; flex-direction:column; padding:26px 16px 18px; background:#fff; border-right:1px solid var(--line); box-shadow:8px 0 28px rgba(119,35,83,.035); }
.app-sidebar .brand { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:0 14px 26px; border-bottom:1px solid var(--line); }
.app-sidebar .logo { color:var(--ink); font-size:1.45rem; font-weight:850; letter-spacing:-.055em; line-height:1.1; }
.app-sidebar .logo span { color:var(--accent); font:italic 700 1.1em Georgia,serif; letter-spacing:-.055em; }
.workspace-badge { color:#95637e; font-size:.74rem; font-weight:650; letter-spacing:.02em; }
.side-nav { display:flex; flex-direction:column; gap:26px; overflow-y:auto; padding:25px 0; }
.side-nav .nav-group { display:flex; flex-direction:column; gap:4px; }
.side-nav .nav-group-label { padding:0 14px 8px; color:#966f86; font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.side-nav a { display:flex; align-items:center; min-height:42px; padding:9px 13px; border-radius:10px; color:#525969; font-size:.9rem; font-weight:650; line-height:1.25; text-decoration:none; }
.side-nav a:hover { color:var(--accent-deep); background:#f9eef5; }
.side-nav a[aria-current] { color:var(--accent-deep); background:#f6e3ef; box-shadow:inset 3px 0 var(--accent); font-weight:800; }
.app-sidebar .logout { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:auto; padding:16px 13px 4px; border-top:1px solid var(--line); }
.app-sidebar .shop-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:.84rem; font-weight:750; }
.app-sidebar .logout .linkbtn { color:var(--muted); font-size:.81rem; text-decoration:none; }
.app-sidebar .logout .linkbtn:hover { color:var(--accent); text-decoration:underline; }
.seller-app main { width:calc(100% - 248px); max-width:1180px; margin:0 auto 0 248px; padding:40px 28px 80px; }
.page-kicker { margin:0 0 8px; color:var(--accent-deep); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
h1 { margin:0 0 22px; color:var(--ink); font-size:clamp(1.75rem,2.2vw,2.35rem); font-weight:800; letter-spacing:-.035em; line-height:1.2; }
h2 { margin:32px 0 14px; color:var(--ink); font-size:1.13rem; font-weight:750; }
p { line-height:1.6; }
.panel,.card-live,.stats div,.details { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 28px rgba(118,37,82,.05); }
.panel { max-width:740px; padding:clamp(20px,2.5vw,30px); }
.panel.narrow { max-width:440px; margin:45px auto; }
.panel label { margin-bottom:17px; }
input,select,textarea { min-height:42px; border-color:#e7d4df; border-radius:10px; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); outline:2px solid #fbe0ee; outline-offset:0; }
.btn { padding:.62rem 1.15rem; border-radius:10px; box-shadow:0 4px 12px rgba(194,24,117,.14); }
.btn.ghost { box-shadow:none; }
.flash { max-width:none; border-left:4px solid var(--ok); border-radius:10px; }
.flash.err { border-left-color:var(--err); }
table { border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 20px rgba(118,37,82,.035); }
th { padding:12px 13px; color:#6a5a66; background:#f9eef5; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
td { padding:12px 13px; }
tbody tr:hover td { background:#fffafd; }
table.items tr.current td,table.items tr.current:hover td { background:#ffeaf4; }
.stats { gap:12px; }
.stats div { min-width:145px; padding:17px 20px; }
.stats b { color:var(--accent-deep); }
.tag { padding:3px 9px; font-weight:700; }
.live-now { background:transparent; }
.card-live { padding:20px; }
.claim-tools { padding:11px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.claim-tabs button { min-height:34px; }
.feed-box { border-top:1px solid var(--line); padding-top:17px; }
.seller-app:not(.has-sidebar) .app-sidebar { position:static; width:auto; height:auto; padding:20px 30px; border-right:0; border-bottom:1px solid var(--line); }
.seller-app:not(.has-sidebar) .app-sidebar .brand { padding:0; border:0; }
.seller-app:not(.has-sidebar) main { width:auto; max-width:1180px; margin:0 auto; }
@media (min-width:1428px) { .seller-app main { margin-left:calc(248px + (100vw - 1428px)/2); } }
@media (max-width:900px) {
  .app-sidebar { position:static; width:auto; height:auto; padding:14px 16px 0; box-shadow:none; border-right:0; border-bottom:1px solid var(--line); }
  .app-sidebar .brand { display:block; padding:0 0 11px; border:0; }
  .app-sidebar .logo { font-size:1.25rem; }
  .workspace-badge { margin-left:10px; }
  .side-nav { flex-direction:row; gap:13px; overflow-x:auto; padding:0 0 10px; white-space:nowrap; }
  .side-nav .nav-group { flex-direction:row; flex:none; gap:3px; }
  .side-nav .nav-group-label { display:none; }
  .side-nav a { min-height:36px; padding:7px 10px; font-size:.82rem; }
  .app-sidebar .logout { position:absolute; top:13px; right:16px; width:auto; padding:0; border:0; align-items:flex-end; }
  .app-sidebar .shop-name { max-width:160px; font-size:.72rem; }
  .seller-app main { width:auto; max-width:none; margin:0; padding:27px 17px 65px; }
}
@media (max-width:520px) {
  .workspace-badge,.app-sidebar .shop-name { display:none; }
  .app-sidebar .logout { top:18px; }
  .seller-app main { padding:23px 14px 55px; }
  main > table { display:block; overflow-x:auto; }
  .panel { padding:18px; }
}
.dashboard-stats { margin:24px 0 28px; }
.dashboard-stats div { flex:1 1 170px; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.dashboard-card { max-width:none; padding:22px; }
.dashboard-card h2 { margin:0 0 9px; }
.quick-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.quick-actions .btn { padding:.48rem .8rem; font-size:.84rem; }
.recent-lives { list-style:none; padding:0; margin:10px 0 0; }
.recent-lives li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.recent-lives li:last-child { border:0; }
.recent-lives a { font-weight:700; }
#pages { scroll-margin-top:20px; }
@media(max-width:700px) { .dashboard-grid { grid-template-columns:1fr; } }

/* Collapsible navigation and readable item inventory beside the claim queue. */
.sidebar-toggle { display:flex; align-items:center; gap:8px; width:100%; margin-top:14px; padding:7px 9px; color:var(--accent-deep); background:#f9eef5; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:.78rem; font-weight:750; cursor:pointer; }
.sidebar-toggle-icon { font-size:1.1rem; line-height:1; }
.seller-app.menu-collapsed .app-sidebar { width:54px; padding:16px 6px; }
.seller-app.menu-collapsed .app-sidebar .brand { padding:0; border:0; }
.seller-app.menu-collapsed .app-sidebar .logo,.seller-app.menu-collapsed .workspace-badge,.seller-app.menu-collapsed .side-nav,.seller-app.menu-collapsed .logout,.seller-app.menu-collapsed .sidebar-toggle-label { display:none; }
.seller-app.menu-collapsed .sidebar-toggle { justify-content:center; margin:0; padding:9px 0; }
.seller-app.menu-collapsed main { width:calc(100% - 54px); max-width:none; margin-left:54px; }
.seller-app.menu-collapsed main:has(#live-root) { padding-left:18px; padding-right:18px; }
.seller-app main:has(#live-root) { max-width:none !important; margin-left:248px; }
#live-root.live-grid { display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); gap:0 18px; align-items:start; }
#live-root .live-banner { grid-column:1 / -1; grid-row:1; }
#live-root .live-left { display:block; grid-column:1; grid-row:2; min-width:0; }
#live-root .live-now { position:static; }
#live-root .live-feed { grid-column:2; grid-row:2; min-width:0; }
#live-root .live-feed > h2:first-child { margin-top:0; }
/* The editable item table becomes two compact rows per item; no field is hidden. */
#live-root .live-setup .table-scroll { overflow-x:visible; }
#live-root table.items { display:block; width:100%; border:0; background:transparent; box-shadow:none; }
#live-root table.items > thead { display:none; }
#live-root table.items > tbody { display:block; }
#live-root table.items > tbody > tr:not(.variant-row) { display:grid; grid-template-columns:minmax(58px,.5fr) minmax(110px,1.1fr) minmax(150px,1.5fr) minmax(90px,.9fr); gap:9px 12px; margin:0 0 10px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:14px; }
#live-root table.items tr.current:not(.variant-row) { background:#ffeaf4; }
#live-root table.items > tbody > tr:not(.variant-row) td { display:block; min-width:0; padding:0; border:0; background:transparent; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(5) { grid-column:1; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(6) { grid-column:2; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(7) { grid-column:3; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(8) { grid-column:4; }
#live-root table.items > tbody > tr:not(.variant-row) td::before { display:block; margin-bottom:4px; color:#6a5a66; font-size:.67rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(1)::before { content:'Item'; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(2)::before { content:'Code'; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(3)::before { content:'Name'; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(4)::before { content:'Price'; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(5)::before { content:'Qty'; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(6)::before { content:'Max per person'; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(7)::before { content:'Taken'; }
#live-root table.items > tbody > tr:not(.variant-row) td:nth-child(8)::before { content:'Available'; }
#live-root table.items input { box-sizing:border-box; width:100%; min-width:0; }
#live-root table.items .variant-row { display:block; margin:-10px 0 12px; background:#fff8fc; border:1px solid var(--line); border-radius:0 0 12px 12px; }
#live-root table.items .variant-row > td:first-child { display:none; }
#live-root table.items .variant-row > td:nth-child(2) { display:block; width:100%; padding:8px 12px; }
#live-root table.items .variant-row .variant-table { width:100%; box-shadow:none; }
#live-root table.items .variant-row .variant-table th,#live-root table.items .variant-row .variant-table td { padding:6px; font-size:.8rem; }
.seller-app.menu-collapsed main:has(#live-root) { margin-left:54px; }
/* Keep row details readable at every desktop width, including wide monitors. */
  #live-root table.items > tbody > tr:not(.variant-row) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #live-root table.items > tbody > tr:not(.variant-row) td:nth-child(n) { grid-column:auto; }
  #live-root table.items .variant-row .variant-table,
  #live-root table.items .variant-row .variant-table > tbody { display:block; border:0; }
  #live-root table.items .variant-row .variant-table > thead { display:none; }
  #live-root table.items .variant-row .variant-table > tbody > tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 10px; padding:8px 10px; border-bottom:1px solid var(--line); }
  #live-root table.items .variant-row .variant-table > tbody > tr > td { display:block; min-width:0; padding:0; border:0; background:transparent; }
  #live-root table.items .variant-row .variant-table > tbody > tr > td::before { display:block; color:#6a5a66; font-size:.65rem; font-weight:800; text-transform:uppercase; }
  #live-root table.items .variant-row .variant-table > tbody > tr > td:nth-child(1)::before { content:'Option'; }
  #live-root table.items .variant-row .variant-table > tbody > tr > td:nth-child(2)::before { content:'Price'; }
  #live-root table.items .variant-row .variant-table > tbody > tr > td:nth-child(3)::before { content:'Qty'; }
  #live-root table.items .variant-row .variant-table > tbody > tr > td:nth-child(4)::before { content:'Taken'; }
  #live-root table.items .variant-row .variant-table > tbody > tr > td:nth-child(5)::before { content:'Left'; }
  #p-claims,#p-unreg,#p-ignored { overflow-x:visible; }
  #p-claims > table,#p-unreg > table,#p-ignored > table { display:block; width:100%; border:0; background:transparent; box-shadow:none; }
  #p-claims > table > thead,#p-unreg > table > thead,#p-ignored > table > thead { display:none; }
  #p-claims > table > tbody,#p-unreg > table > tbody,#p-ignored > table > tbody { display:block; }
  #p-claims > table > tbody > tr,#p-unreg > table > tbody > tr,#p-ignored > table > tbody > tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; margin:0 0 10px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:12px; }
  #p-claims > table > tbody > tr > td,#p-unreg > table > tbody > tr > td,#p-ignored > table > tbody > tr > td { display:block; min-width:0; padding:0; border:0; overflow-wrap:anywhere; background:transparent; white-space:normal; }
  #p-claims > table > tbody > tr > td::before,#p-unreg > table > tbody > tr > td::before,#p-ignored > table > tbody > tr > td::before { display:block; margin-bottom:3px; color:#6a5a66; font-size:.65rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
  #p-claims td:nth-child(1)::before { content:'Item'; } #p-claims td:nth-child(2)::before { content:'Customer'; }
  #p-claims td:nth-child(3)::before { content:'Qty'; } #p-claims td:nth-child(4)::before { content:'Status'; }
  #p-claims td:nth-child(5)::before { content:'Payment'; } #p-claims td:nth-child(6)::before { content:'Message'; }
  #p-claims td:nth-child(7)::before { content:'Time'; } #p-claims td:nth-child(8)::before { content:'Actions'; }
  #p-unreg td:nth-child(1)::before { content:'Name on Facebook'; } #p-unreg td:nth-child(2)::before { content:'Comment'; }
  #p-unreg td:nth-child(3)::before { content:'Time'; } #p-unreg td:nth-child(4)::before { content:'Registration link'; }
  #p-ignored td:nth-child(1)::before { content:'Name'; } #p-ignored td:nth-child(2)::before { content:'Comment'; }
  #p-ignored td:nth-child(3)::before { content:'Why it did not count'; } #p-ignored td:nth-child(4)::before { content:'Time'; }
  #p-claims .qtyform { flex-wrap:wrap; }
  #p-claims .qtyform input { width:58px; }
@media (max-width:760px) {
  #live-root.live-grid { display:flex; flex-direction:column; }
  #live-root .live-left { display:contents; }
  #live-root .live-banner { order:0; }
  #live-root .live-now { order:1; }
  #live-root .live-setup { order:2; }
  #live-root .live-feed { order:3; }
  #live-root .live-feed > h2:first-child { margin-top:22px; }
}
@media (max-width:900px) {
  .seller-app.menu-collapsed .app-sidebar { position:static; width:auto; padding:9px 16px; }
  .seller-app main:has(#live-root),.seller-app.menu-collapsed main:has(#live-root) { width:auto; margin:0; }
}
@media (max-width:600px) {
  #live-root table.items > tbody > tr:not(.variant-row) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #live-root table.items > tbody > tr:not(.variant-row) td:nth-child(n) { grid-column:auto; }
}

/* One visible line per entry. Open a row to edit or inspect every field. */
.row-toggle { display:inline-block; width:30px; height:30px; padding:0; margin-right:2px; border:0; background:transparent; color:var(--accent-deep); font:inherit; font-size:1rem; cursor:pointer; vertical-align:middle; }
.row-expanded .row-toggle { transform:rotate(90deg); }
#live-root tr.compact-row > td:not(:has(a,button:not(.row-toggle),input,select,textarea,form)) { cursor:pointer; }
#live-root table.items > tbody > tr.compact-row { display:grid; grid-template-columns:54px minmax(0,1fr) 70px 78px 112px; align-items:center; gap:6px; margin:0; padding:7px 8px; border-radius:0; border-bottom:1px solid var(--line); }
#live-root table.items > tbody > tr.compact-row > td { display:none; min-width:0; padding:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#live-root table.items > tbody > tr.compact-row > td:nth-child(1),
#live-root table.items > tbody > tr.compact-row > td:nth-child(3),
#live-root table.items > tbody > tr.compact-row > td:nth-child(7),
#live-root table.items > tbody > tr.compact-row > td:nth-child(8),
#live-root table.items > tbody > tr.compact-row > td:nth-child(9) { display:block; grid-column:auto; }
#live-root table.items > tbody > tr.compact-row > td::before { display:none; }
#live-root table.items > tbody > tr.compact-row > td:nth-child(7)::before { display:inline; content:'Taken '; font-size:.65rem; }
#live-root table.items > tbody > tr.compact-row > td:nth-child(8)::before { display:inline; content:'Left '; font-size:.65rem; }
#live-root table.items > tbody > tr.compact-row > td:nth-child(3) input { min-height:34px; margin:0; padding:5px 7px; }
#live-root table.items > tbody > tr.compact-row.row-expanded { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px; border-radius:12px; margin:8px 0 0; }
#live-root table.items > tbody > tr.compact-row.row-expanded > td:nth-child(n) { display:block; grid-column:auto; overflow:visible; white-space:normal; }
#live-root table.items > tbody > tr.compact-row > td.item-options-action a { display:inline-block; font-size:.73rem; font-weight:700; line-height:1.2; }
#live-root table.items > tbody > tr.compact-row.row-expanded > td.item-options-action::before { content:'Variations'; }
#live-root table.items > tbody > tr.compact-row.row-expanded > td::before { display:block; margin-bottom:4px; }
#live-root table.items > tbody > tr.compact-row.row-expanded > td:nth-child(7)::before { content:'Taken'; }
#live-root table.items > tbody > tr.compact-row.row-expanded > td:nth-child(8)::before { content:'Available'; }
#live-root table.items > tbody > tr.variant-row { display:none; margin:0 0 8px; }
#live-root table.items > tbody > tr.row-expanded + tr.variant-row { display:block; }
#live-root table.items > tbody > tr.variant-row .variant-table { display:table; width:100%; table-layout:fixed; }
#live-root table.items > tbody > tr.variant-row .variant-table > thead { display:table-header-group; }
#live-root table.items > tbody > tr.variant-row .variant-table > tbody { display:table-row-group; }
#live-root table.items > tbody > tr.variant-row .variant-table > tbody > tr { display:table-row; }
#live-root table.items > tbody > tr.variant-row .variant-table > tbody > tr > td { display:table-cell; padding:4px 3px; font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#live-root table.items > tbody > tr.variant-row .variant-table td::before { display:none; }
#live-root table.items > tbody > tr.variant-row .variant-table th { display:table-cell; padding:4px 3px; font-size:.65rem; }
#p-claims > table > tbody > tr.compact-row,#p-unreg > table > tbody > tr.compact-row,#p-ignored > table > tbody > tr.compact-row { display:grid; align-items:center; gap:6px; margin:0; padding:8px; border-radius:0; border-bottom:1px solid var(--line); }
#p-claims > table > tbody > tr.compact-row { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 30px 83px 75px; }
#p-unreg > table > tbody > tr.compact-row,#p-ignored > table > tbody > tr.compact-row { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); }
#p-claims > table > tbody > tr.compact-row > td,#p-unreg > table > tbody > tr.compact-row > td,#p-ignored > table > tbody > tr.compact-row > td { display:none; min-width:0; padding:0; border:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#p-claims > table > tbody > tr.compact-row > td:nth-child(-n+5),#p-unreg > table > tbody > tr.compact-row > td:nth-child(-n+3),#p-ignored > table > tbody > tr.compact-row > td:nth-child(-n+3) { display:block; }
#p-claims > table > tbody > tr.compact-row > td::before,#p-unreg > table > tbody > tr.compact-row > td::before,#p-ignored > table > tbody > tr.compact-row > td::before { display:none; }
#p-claims > table > tbody > tr.compact-row.row-expanded,#p-unreg > table > tbody > tr.compact-row.row-expanded,#p-ignored > table > tbody > tr.compact-row.row-expanded { grid-template-columns:repeat(2,minmax(0,1fr)); margin:7px 0; border:1px solid var(--line); border-radius:12px; }
#p-claims > table > tbody > tr.compact-row.row-expanded > td:nth-child(n),#p-unreg > table > tbody > tr.compact-row.row-expanded > td:nth-child(n),#p-ignored > table > tbody > tr.compact-row.row-expanded > td:nth-child(n) { display:block; overflow:visible; white-space:normal; }
#p-claims > table > tbody > tr.compact-row.row-expanded > td::before,#p-unreg > table > tbody > tr.compact-row.row-expanded > td::before,#p-ignored > table > tbody > tr.compact-row.row-expanded > td::before { display:block; }

/* Guided item entry and variation combinations. */
.item-entry { margin:10px 0 16px; }
.item-entry-row { padding:14px; margin:0 0 12px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.item-entry-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 12px; }
.item-entry-heading strong { color:var(--accent-deep); }
.item-entry-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
.item-entry-fields label:first-child { grid-column:1/-1; }
.item-entry-row label { min-width:0; margin:0; font-size:.82rem; font-weight:700; }
.item-entry-row label .muted { font-weight:400; }
.item-entry-row input { box-sizing:border-box; width:100%; margin-top:4px; }
.item-entry-row:has([data-has-variations]:checked) [data-base-stock] { display:none; }
.item-variation { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.item-variation-switch { display:flex !important; align-items:center; gap:8px; }
.item-variation-switch input { width:auto; margin:0; }
.item-variation [data-variation-fields] { padding-top:10px; }
.item-option-group { padding:12px; margin:10px 0; border:1px solid var(--line); border-radius:10px; background:#fff9fc; }
.item-option-group > label { display:block; max-width:380px; }
.item-choice-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(100px,.8fr) auto; gap:8px; align-items:end; margin:10px 0; }
.item-choice-row > button { margin-bottom:8px; }
.item-combinations { margin-top:16px; }
.item-combinations h3 { margin:0 0 8px; font-size:1rem; }
.item-combo-table { width:100%; }
.item-combo-table th,.item-combo-table td { padding:7px; }
.item-combo-table td:first-child { overflow-wrap:anywhere; }
.item-combo-table input { min-width:0; }
@media (max-width:1100px) {
  .item-choice-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .item-combo-table,.item-combo-table tbody { display:block; }
  .item-combo-table thead { display:none; }
  .item-combo-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px; padding:8px 0; border-bottom:1px solid var(--line); }
  .item-combo-table td { display:block; min-width:0; padding:0; }
  .item-combo-table td:first-child { grid-column:1/-1; font-weight:700; }
  .item-combo-table td:nth-child(2)::before { content:'Stock'; display:block; font-size:.68rem; color:var(--muted); }
  .item-combo-table td:nth-child(3)::before { content:'Final price (optional)'; display:block; font-size:.68rem; color:var(--muted); }
}
@media (max-width:550px) { .item-entry-fields,.item-choice-row { grid-template-columns:1fr; } }