/* /asset-management — the Assets product page's own mock-ups (ADR-0088). Shared look: ../product.css. */
.as-pill { font-size: .66rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #eef0f4; color: #6b7487; }
.as-pill.on { background: #e0f2e9; color: #15803d; }

/* 1 — the tag */
.as-tag { width: 268px; background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); font-size: .8rem; position: relative; }
.as-tag::before { content: ""; position: absolute; left: -7px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: #ecebf1; box-shadow: inset 0 0 0 3px #fff; }
.as-tag-top { display: flex; justify-content: space-between; align-items: center; }
.as-tag-id { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .06em; color: #0c64ae; }
.as-tag-dev { display: flex; gap: 12px; align-items: center; margin: 14px 0; padding: 12px; border-radius: 10px; background: #f6f7fb; }
.as-tag-dev > i { font-size: 1.6rem; --fa-primary-color: #0c64ae; --fa-secondary-color: #0c64ae; }
.as-tag-dev small { display: block; color: #8a93a4; font-size: .7rem; margin-top: 2px; }
.as-tag-dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; margin: 0; }
.as-tag-dl dt { color: #8a93a4; font-size: .74rem; }
.as-tag-dl dd { margin: 0; text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.as-tag-dl .pp-av { width: 20px; height: 20px; font-size: .55rem; }

/* 2 — invoice to form */
.as-inv { display: flex; align-items: center; gap: 10px; }
.as-inv-paper { width: 118px; background: #fff; border-radius: 8px; padding: 12px 10px; box-shadow: 0 8px 22px rgba(16, 24, 40, .1); display: flex; flex-direction: column; gap: 6px; font-size: .66rem; transform: rotate(-4deg); }
.as-inv-paper .ln { height: 5px; border-radius: 3px; background: #e6e9f1; }
.as-inv-paper .w80 { width: 80%; } .as-inv-paper .w60 { width: 60%; } .as-inv-paper .w90 { width: 90%; } .as-inv-paper .w50 { width: 50%; }
.as-inv-paper .hl { font-size: .6rem; padding: 2px 4px; border-radius: 4px; background: #efeafd; color: #5b21b6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-inv-arrow { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0c64ae, #7c3aed); color: #fff; font-size: .85rem;
  box-shadow: 0 6px 16px rgba(91, 91, 214, .4); --fa-primary-color: #fff; --fa-secondary-color: #fff; }
.as-inv-form { width: 128px; display: grid; gap: 6px; }
.as-inv-form label { display: flex; flex-direction: column; gap: 3px; font-size: .58rem; font-weight: 600; color: #8a93a4; }
.as-inv-form label span { font-size: .7rem; font-weight: 500; color: #1d2433; background: #fff; border: 1px solid #e3e7ee; border-radius: 6px; padding: 5px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .4s; transition-delay: calc(var(--i) * .35s + .6s); }
.pp-card.in .as-inv-form label span { opacity: 1; transform: none; }

/* 3 — phone, I Received It */
.as-phone { width: 210px; border-radius: 26px; background: #fff; border: 6px solid #1d2433; padding: 14px 12px 16px; box-shadow: 0 16px 36px rgba(16, 24, 40, .16); font-size: .76rem; display: flex; flex-direction: column; gap: 10px; }
.as-phone-bar { text-align: center; padding-bottom: 6px; border-bottom: 1px solid #eef0f4; }
.as-phone-item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: #f6f7fb; }
.as-phone-item > i { font-size: 1.4rem; --fa-primary-color: #0c64ae; --fa-secondary-color: #0c64ae; }
.as-phone-item small { display: block; color: #8a93a4; font-size: .68rem; }
.as-phone-btn { text-align: center; padding: 9px; border-radius: 10px; background: #16a34a; color: #fff; font-weight: 600; animation: ppPulse 1.8s ease-in-out infinite; }
.as-phone-link { text-align: center; color: #6b7487; font-size: .7rem; text-decoration: underline; }

/* 4 — flags */
.as-flags { width: 260px; display: grid; gap: 8px; }
.as-flag { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; background: #fff; box-shadow: 0 6px 16px rgba(16, 24, 40, .07); font-size: .8rem;
  opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; transition-delay: calc(var(--i) * .12s + .3s); }
.pp-card.in .as-flag { opacity: 1; transform: none; }
.as-flag i { color: var(--c); --fa-primary-color: var(--c); --fa-secondary-color: var(--c); }
.as-flag b { margin-left: auto; min-width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: .72rem; color: #fff; background: var(--c); }

/* 5 — loan */
.as-loan { width: 262px; background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); font-size: .8rem; }
.as-loan-head { display: flex; gap: 10px; align-items: center; }
.as-loan-head > i { font-size: 1.5rem; --fa-primary-color: #7c3aed; --fa-secondary-color: #7c3aed; }
.as-loan-head small { display: block; color: #8a93a4; font-size: .7rem; }
.as-loan-track { position: relative; height: 8px; border-radius: 999px; background: #eef0f4; margin: 22px 0 10px; }
.as-loan-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #a78bfa, #7c3aed); transition: width 1.6s cubic-bezier(.2, .8, .2, 1) .4s; }
.as-loan-dot { position: absolute; right: -2px; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #7c3aed; transform: translateY(-50%); }
.pp-card.in .as-loan-fill { width: 68%; }
.as-loan-dates { display: flex; justify-content: space-between; color: #8a93a4; font-size: .72rem; }
.as-loan-dates b { color: #7c3aed; }

/* 6 — history */
.as-hist { width: 262px; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 12px 30px rgba(16, 24, 40, .1); font-size: .78rem; }
.as-hist-row { position: relative; display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; padding: 9px 0;
  opacity: 0; transition: opacity .45s; transition-delay: calc(var(--i) * .2s + .3s); }
.pp-card.in .as-hist-row { opacity: 1; }
.as-hist-row:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 26px; bottom: -8px; width: 2px; background: #eef0f4; }
.as-hist-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.as-hist-row small { color: #a0a8b6; font-size: .68rem; white-space: nowrap; }

/* walkthrough scenes */
.as-assign-asset, .as-return-done, .as-confirm-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #f6f7fb; margin-bottom: 16px; }
.as-assign-asset > i, .as-confirm-card > i { font-size: 1.5rem; --fa-primary-color: #0c64ae; --fa-secondary-color: #0c64ae; }
.as-assign-asset small, .as-confirm-card small, .as-return-done small { display: block; color: #8a93a4; font-size: .76rem; margin-top: 2px; }
.as-assign .pp-form label span { display: flex; align-items: center; gap: 8px; }
.as-assign .pp-av { width: 22px; height: 22px; font-size: .55rem; }
.as-assign .pp-fake-btn { margin-top: 18px; }
.as-confirm-note { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 999px; background: #eef5fd; color: #0c64ae; font-size: .8rem; margin-bottom: 18px; }
.as-confirm-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #16a34a; color: #fff; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.pp-scene.on .as-confirm-ok { animation: ppStamp .5s .8s both cubic-bezier(.2, 1.6, .4, 1); }
.as-confirm-log { font-size: .78rem; color: #6b7487; padding-left: 4px; }
.pp-scene.on .as-confirm-log { animation: ppRow .5s 1.3s both; }
.as-return .pp-form { margin-bottom: 18px; }
.as-return-done { background: linear-gradient(135deg, #e7f6ee, #eaf2fb); }
.as-return-done > i { font-size: 1.7rem; --fa-primary-color: #16a34a; --fa-secondary-color: #0c64ae; }
.pp-scene.on .as-return-done { animation: ppRow .5s .6s both; }

@media (max-width: 640px) {
  .pp-scene .pp-form label:nth-child(n+5) { display: none; }
  .as-confirm-card { flex-wrap: wrap; }
}
.pp-run-sec .pp-window-body { min-height: 430px; }