/* Puusaun Kortit: Oma tili */
:root {
	--ps-spruce: #13322D;
	--ps-smoke: #616D6B;
	--ps-bench: #CBB996;
	--ps-moss: #978768;
	--ps-mist: #FFF8EB;
	--ps-peach: #FCD9B5;
	--ps-line: #E4DED2;
	--ps-ok: #1F7A45;
	--ps-ok-bg: #E3F5E9;
	--ps-warn: #8A5A12;
	--ps-warn-bg: #FDF1D8;
	--ps-bad: #A12E22;
	--ps-bad-bg: #FBE4E1;
}

.ps-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0 0 24px; }
.ps-card { display: flex; flex-direction: column; gap: 2px; padding: 20px; border-radius: 16px; background: var(--ps-spruce); color: #fff !important; text-decoration: none !important; transition: transform .15s ease; }
.ps-card:hover { transform: translateY(-2px); }
.ps-card--value { background: var(--ps-bench); color: var(--ps-spruce) !important; }
.ps-card--value .ps-k { color: var(--ps-spruce); opacity: .75; }
.ps-card.is-inactive { opacity: .55; }
.ps-k { display: block; font-size: 11px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--ps-bench); }
.ps-v { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.ps-title { font-size: 18px; margin-bottom: 12px; }
.ps-row { display: flex; gap: 32px; margin-bottom: 14px; }
.ps-chip { align-self: flex-start; padding: 7px 16px; border-radius: 999px; background: var(--ps-bench); color: var(--ps-spruce); font-size: 13px; font-weight: 600; }
.ps-card--value .ps-chip { background: var(--ps-spruce); color: #fff; }

.ps-empty { padding: 32px; border-radius: 16px; background: var(--ps-mist); text-align: center; }
.ps-btn { display: inline-block; padding: 12px 24px; border-radius: 999px; background: var(--ps-spruce); color: #fff !important; text-decoration: none !important; font-weight: 600; }

.ps-single { max-width: 440px; }
.ps-back { display: inline-block; margin-bottom: 8px; text-decoration: none; color: var(--ps-smoke); }
.ps-single__title { margin: 0 0 16px; }
.ps-qr { width: 240px; max-width: 100%; padding: 12px; margin: 0 auto 8px; background: #fff; border: 1px solid var(--ps-line); border-radius: 14px; }
.ps-qr svg { display: block; width: 100%; height: auto; }
.ps-qr.is-dim { opacity: .35; }
.ps-code { margin: 0; text-align: center; font-weight: 700; letter-spacing: .06em; }
.ps-hint { margin: 2px 0 16px; text-align: center; font-size: 13px; color: var(--ps-smoke); }
.ps-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ps-pill { padding: 7px 14px; border-radius: 999px; background: var(--ps-mist); font-size: 13px; font-weight: 600; }
.ps-pill--ok { background: var(--ps-ok-bg); color: var(--ps-ok); }
.ps-pill--warn { background: var(--ps-warn-bg); color: var(--ps-warn); }
.ps-pill--bad { background: var(--ps-bad-bg); color: var(--ps-bad); }
.ps-state { padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.ps-state--warn { background: var(--ps-warn-bg); color: var(--ps-warn); }
.ps-state--bad { background: var(--ps-bad-bg); color: var(--ps-bad); }
.ps-h { margin: 24px 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ps-smoke); }
.ps-history { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ps-line); }
.ps-history li { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ps-line); font-size: 14px; }
.ps-history li.is-undone { text-decoration: line-through; opacity: .6; }
.ps-history__date { flex: 0 0 120px; color: var(--ps-smoke); }

.ps-order-cards { margin: 24px 0; padding: 20px; border-radius: 16px; background: var(--ps-mist); }
.ps-order-cards h2 { margin-top: 0; }