/* Customer account: same world as the shop, laid out like a calm notebook. */
.acct { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; padding-block: 34px 80px; align-items: start; }
.acct-nav { position: sticky; top: calc(var(--bar-h) + 90px); display: grid; gap: 4px; }
.acct-nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 14.5px; color: var(--espresso); }
.acct-nav a:hover { background: var(--kraft-soft); }
.acct-nav a.on { background: var(--espresso); color: #fff; }
.acct-nav .n { background: var(--accent); color: #fff; border-radius: 10px; font-size: 11.5px; padding: 1px 7px; }
.acct-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.acct-head h1 { font-size: clamp(28px, 3.2vw, 38px); }
.acct-head p { margin: 6px 0 0; color: var(--muted-warm); }
.panel-card { background: var(--paper-white); border: 1px solid var(--line-warm); border-radius: 12px; padding: 20px; min-width: 0; }
.panel-card + .panel-card { margin-top: 16px; }
.panel-card h2 { font-size: 22px; margin-bottom: 4px; }
.overview { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.overview .panel-card + .panel-card { margin-top: 0; }
.track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 16px 0 10px; }
.track div { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted-warm); }
.track div::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--kraft-soft); margin-bottom: 6px; }
.track div.done::before { background: var(--accent-2); }
.track div.cur { color: var(--espresso); }
.track div.cur::before { background: var(--accent); }
.oline { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-warm); font-size: 14px; }
.oline img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.order-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.order-top h3 { font-size: 20px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--kraft-soft); }
.status.ok { background: #e2ece5; color: var(--accent-2); }
.status.hot { background: var(--accent-soft); color: var(--accent-deep); }
.trk { background: var(--linen); border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-top: 8px; }
.acts-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.steps-line { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0; }
.steps-line span { font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--kraft-soft); color: var(--muted-warm); }
.steps-line span.done { background: #e2ece5; color: var(--accent-2); }
.steps-line span.cur { background: var(--accent); color: #fff; }
.proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 12px 0; }
.proof img { width: 100%; border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; }
.thread { display: grid; gap: 8px; max-height: 320px; overflow: auto; padding: 4px; margin: 10px 0; }
.msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 14px; background: var(--kraft-soft); justify-self: end; }
.msg.owner { justify-self: start; background: var(--espresso); color: #fff; }
.msg time { display: block; font-size: 11px; opacity: .7; margin-top: 3px; }
.reply { display: flex; gap: 8px; }
.reply input { flex: 1; min-width: 0; font: inherit; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--line-warm); background: #fff; }
.filegrid { display: flex; gap: 8px; flex-wrap: wrap; }
.filegrid img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.quote { background: var(--kraft-soft); border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; }
.quote b.big { font-family: var(--display); font-size: 30px; }
.buyagain { display: grid; gap: 10px; }
.ba { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; background: var(--paper-white); border: 1px solid var(--line-warm); border-radius: 10px; padding: 8px 12px; }
.ba img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.ba .t { font-weight: 700; font-size: 14.5px; }
.ba small { color: var(--muted-warm); }
.signin { max-width: 460px; margin: 60px auto 90px; }
@media (max-width: 900px) {
  .acct { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
  .acct-nav { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .acct-nav a { white-space: nowrap; padding: 8px 12px; background: var(--paper-white); border: 1px solid var(--line-warm); }
  .overview, .proof { grid-template-columns: 1fr; }
  .ba { grid-template-columns: 56px minmax(0, 1fr); }
  .ba > :nth-child(n+3) { grid-column: 2; justify-self: start; }
  .track div { font-size: 10.5px; }
}