/* KnitzNGritz customer app layout, on top of brand.css (k-work mode). */
body.k-work { min-height: 100vh; }
.a-main { width: min(1320px, 100% - 32px); margin: 0 auto; padding: 22px 0 80px; }
.a-meters { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: end; padding: 10px 0 12px;
  width: min(1440px, 100% - 24px); margin-inline: auto; border-top: 1px solid var(--k-line); }
.a-meters .k-meter { flex: 1 1 128px; max-width: 220px; }
.a-meters .a-buy { margin-left: auto; align-self: center; }
.a-user { position: relative; }
.a-user summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0 12px; border-radius: 10px; color: var(--k-lilac); font-weight: 600; font-size: var(--k-fs-sm); }
.a-user summary::-webkit-details-marker { display: none; }
.a-user summary:hover { background: rgba(201,184,255,.08); color: var(--k-white); }
.a-user summary:focus-visible { outline: 3px solid var(--k-teal); outline-offset: 2px; }
.a-user__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; display: grid; gap: 2px;
  padding: 8px; border-radius: 14px; background: #1C1863; box-shadow: inset 0 0 0 1px var(--k-line-strong), 0 20px 40px -18px #05031e; }
.a-user__menu a, .a-user__menu button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 12px;
  border-radius: 9px; color: var(--k-lilac); cursor: pointer; font-size: var(--k-fs-sm); }
.a-user__menu a:hover, .a-user__menu button:hover, .a-user__menu a:focus-visible, .a-user__menu button:focus-visible { background: rgba(18,229,200,.1); color: #fff; }
.a-user__email { padding: 8px 12px 10px; font-size: var(--k-fs-xs); color: var(--k-lilac-dim); border-bottom: 1px solid var(--k-line); margin-bottom: 4px; overflow-wrap: anywhere; }

.a-banner { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between;
  margin: 0 0 22px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(100deg, rgba(255,176,31,.16), rgba(255,46,147,.12));
  box-shadow: inset 0 0 0 1.5px rgba(255,176,31,.5); }
.a-banner p { margin: 0; color: var(--k-white); }
.a-banner--quiet { background: rgba(18,229,200,.08); box-shadow: inset 0 0 0 1.5px rgba(18,229,200,.4); }

.t-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 22px; }
.t-head img { width: 56px; height: 56px; flex: none; }
.t-head h1 { margin: 0; }
.t-head p { margin: 4px 0 0; color: var(--k-lilac); }
.t-layout { display: grid; gap: var(--k-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .t-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.t-form > * + * { margin-top: 0; }
.t-form .k-btn[type=submit] { width: 100%; margin-top: 6px; }
.t-row { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.t-results h2 { margin: 0 0 14px; }
.t-side { display: grid; gap: var(--k-gap); }
.t-cost { font-size: var(--k-fs-sm); color: var(--k-lilac-dim); margin: 10px 0 0; text-align: center; }
details.t-more { margin: 0 0 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--k-line); }
details.t-more summary { cursor: pointer; padding: 12px 14px; font-weight: 600; color: var(--k-white); font-size: var(--k-fs-sm); }
details.t-more > div { padding: 4px 14px 14px; }

.j-list { display: grid; gap: 14px; }
.j-card { display: grid; gap: 10px; }
.j-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.j-title { display: block; color: var(--k-white); overflow-wrap: anywhere; }
.j-when { font-size: var(--k-fs-xs); }
.j-note { margin: 0; font-size: var(--k-fs-sm); }
.j-files { display: grid; gap: 12px; }
.j-files--grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.j-file { display: grid; gap: 8px; align-content: start; }
.j-file video { width: 100%; max-height: 520px; border-radius: 12px; background: #0D0B33; }
.j-file audio { width: 100%; }
.j-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.j-forget { justify-self: start; }
.k-card-cancel { justify-self: start; }

.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; max-height: 340px; overflow: auto;
  padding: 4px; margin: 0 0 18px; }
.p-item { position: relative; display: grid; gap: 4px; padding: 0; border: 0; background: none; color: var(--k-lilac); cursor: pointer;
  font: inherit; text-align: left; border-radius: 12px; }
.p-item img, .p-item .p-ico { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: grid; place-items: center;
  background: var(--k-night-deep); font-size: 1.8rem; box-shadow: inset 0 0 0 1px var(--k-line); }
.p-item.is-on img, .p-item.is-on .p-ico { box-shadow: 0 0 0 3px var(--k-teal), 0 0 18px rgba(18,229,200,.45); }
.p-item:focus-visible { outline: 3px solid var(--k-gold); outline-offset: 2px; }
.p-name { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-num { position: absolute; top: 6px; left: 6px; min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--k-teal); color: var(--k-night); font: 400 .78rem/1 var(--k-font-display); }

.ph-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 0 0 14px; }
.ph-item { position: relative; display: grid; gap: 4px; cursor: pointer; font-size: .75rem; color: var(--k-lilac); }
.ph-item input { position: absolute; opacity: 0; }
.ph-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--k-line); }
.ph-item input:checked + img { box-shadow: 0 0 0 3px var(--k-magenta), 0 0 18px rgba(255,46,147,.5); }
.ph-item input:focus-visible + img { outline: 3px solid var(--k-gold); outline-offset: 2px; }
.ph-item [data-del-photo] { position: absolute; top: 6px; right: 6px; }

.v-own { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.v-own li { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(201,184,255,.05); }
@media (min-width: 560px) { .v-own li { grid-template-columns: 8rem 1fr auto; align-items: center; } }
.v-own audio { width: 100%; height: 36px; }
.v-pick { display: flex; gap: 10px; align-items: end; }
.v-pick .k-field { flex: 1; margin-bottom: 0; }
.v-pickwrap { margin-bottom: 18px; }

.m-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.m-item { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 16px; background: rgba(28,24,92,.88); box-shadow: inset 0 0 0 1px var(--k-line); }
.m-thumb { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--k-night-deep); display: grid; place-items: center; }
.m-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-thumb .p-ico { font-size: 2.4rem; color: var(--k-teal); }
.m-name { font-size: var(--k-fs-sm); color: var(--k-white); overflow-wrap: anywhere; }
.m-meta { font-size: var(--k-fs-xs); color: var(--k-lilac-dim); }
.m-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.m-item audio { width: 100%; height: 36px; }

.h-grid { display: grid; gap: var(--k-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1040px) { .h-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.h-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.h-tool { display: grid; gap: 6px; padding: 14px; border-radius: 14px; text-decoration: none; color: var(--k-lilac);
  background: rgba(201,184,255,.05); box-shadow: inset 0 0 0 1px var(--k-line); transition: box-shadow .15s, transform .15s; }
.h-tool img { width: 40px; height: 40px; }
.h-tool strong { color: var(--k-white); font-size: var(--k-fs-sm); }
.h-tool span { font-size: var(--k-fs-xs); line-height: 1.35; }
.h-tool:hover, .h-tool:focus-visible { box-shadow: inset 0 0 0 1.5px var(--k-teal), 0 0 18px rgba(18,229,200,.2); transform: translateY(-2px); outline: none; }
.h-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

.acc-grid { display: grid; gap: var(--k-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .acc-grid { grid-template-columns: 1fr 1fr; } }
.acc-plan { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.acc-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: var(--k-fs-sm); }
.acc-dl dt { color: var(--k-lilac-dim); }
.acc-dl dd { margin: 0; color: var(--k-white); }
.acc-danger { box-shadow: inset 0 0 0 1.5px rgba(255,107,74,.45) !important; }

.ad-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 22px; }
.ad-kpi { padding: 14px 16px; border-radius: 14px; background: rgba(28,24,92,.88); box-shadow: inset 0 0 0 1px var(--k-line); }
.ad-kpi b { display: block; font: 400 1.5rem/1.1 var(--k-font-display); color: var(--k-gold); }
.ad-kpi span { font-size: var(--k-fs-xs); color: var(--k-lilac); }
.ad-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ad-actions form { display: inline-flex; gap: 4px; }
.ad-actions input { width: 4.2rem; }
.k-table td small { display: block; color: var(--k-lilac-dim); }

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: min(460px, 100%); }
.auth-card h1 { margin: 0 0 6px; }
.auth-card .auth-logo { display: block; margin: 0 auto 22px; height: 46px; }
.auth-alt { margin: 18px 0 0; text-align: center; font-size: var(--k-fs-sm); color: var(--k-lilac); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.legal { width: min(760px, 100% - 32px); margin: 0 auto; padding: 32px 0 80px; line-height: 1.65; }
.legal h1 { font-family: var(--k-font-display); font-weight: 400; color: var(--k-white); }
.legal h2, .legal h3 { color: var(--k-white); margin-top: 2em; }
.legal a { color: var(--k-teal); }
.legal .updated { color: var(--k-lilac-dim); }
.pub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(1200px, 100% - 32px); margin: 0 auto; padding: 16px 0; }
.pub-top img { height: 36px; }
.pub-foot { text-align: center; padding: 30px 16px 40px; color: var(--k-lilac-dim); font-size: var(--k-fs-sm); }
.pub-foot a { color: var(--k-lilac); margin: 0 8px; }
@media (max-width: 720px) {
  .a-meters { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .a-meters .k-meter { flex: 0 0 120px; }
  .a-meters .a-buy { position: sticky; right: 0; }
}

/* review round 1 fixes */
.a-user summary .k-hex { --size: 18px; width: 18px; height: 20px; flex: none; }
.p-grid > .k-hint { grid-column: 1 / -1; margin: 4px 0; }
.t-head h1 { font-size: var(--k-fs-xl); line-height: 1.1; }
.t-head img { width: 48px; height: 48px; }
.m-tools .k-tabs { min-width: 0; max-width: 100%; }
.k-table-wrap { max-width: 100%; overflow-x: auto; }
.acc-grid > * { min-width: 0; }
.ad-kpis { min-width: 0; }
h1.k-h1 { font-size: var(--k-fs-xl); }
@media (max-width: 1100px) {
  .k-topbar__row { flex-wrap: wrap; row-gap: 0; }
  .k-topbar__row .k-nav { order: 3; flex: 1 0 100%; min-width: 0; max-width: 100%; padding-bottom: 8px; }
  .k-topbar, .a-meters { max-width: 100vw; min-width: 0; }
}
@media (max-width: 720px) {
  .k-logo img { height: 28px; }
  .k-nav a { padding: 0 10px; }
}
/* review round 2 fixes */
.h-machine { overflow-x: clip; max-width: 100%; }
.a-buy__short { display: none; }
@media (max-width: 720px) {
  .a-buy__long { display: none; }
  .a-buy__short { display: inline; }
  .a-meters .a-buy { box-shadow: -14px 0 14px -6px var(--k-ink, #0d0b33); }
}