.penny-page { padding-top: 24px; padding-bottom: 36px; }
.penny-header { max-width: 820px; margin-bottom: 22px; }
.penny-header h1 { margin: 5px 0 10px; }
.penny-header p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.penny-caution { border: 1px solid var(--line-strong); border-left: 4px solid var(--brand); background: var(--surface); padding: 16px 18px; line-height: 1.6; border-radius: 12px; margin-bottom: 20px; }
.penny-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; background: var(--surface); padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.penny-filters label, .penny-report-form label, .penny-review-form label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.penny-filters input, .penny-filters select, .penny-report-form input, .penny-report-form select, .penny-report-form textarea, .penny-review-form input, .penny-review-form select, .penny-review-form textarea { width: 100%; box-sizing: border-box; min-height: 42px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 9px 11px; font: inherit; }
.penny-filters .penny-checkbox, .penny-review-form .penny-checkbox { flex-direction: row; align-items: center; line-height: 1.4; }
.penny-checkbox input[type=checkbox] { width: 18px; min-height: 18px; height: 18px; flex: 0 0 18px; }
.penny-filter-note { font-size: 12px; line-height: 1.5; }
.penny-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.penny-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; transition: box-shadow .18s ease, border-color .18s ease; }
.penny-card:hover { border-color: var(--line-strong); box-shadow: 0 7px 20px rgba(15,23,41,.07); }
.penny-photo { height: 180px; background: #fff; color: #626b80; display: flex; align-items: center; justify-content: center; padding: 16px; border-bottom: 1px solid var(--line); }
.penny-photo img { width: 100%; height: 100%; object-fit: contain; filter: none !important; mix-blend-mode: normal !important; }
.penny-card-body { display: flex; flex: 1; flex-direction: column; padding: 17px; }
.penny-card h3 { font-size: 16px; line-height: 1.45; margin: 9px 0 5px; overflow-wrap: anywhere; }
.penny-label { align-self: flex-start; background: var(--brand-soft); color: var(--brand-ink); border-radius: 6px; padding: 4px 7px; font-size: 11px; font-weight: 800; }
.penny-store { color: var(--ink-2); font-size: 13px; font-weight: 700; line-height: 1.5; margin: 0 0 10px; }
.penny-price { margin: 0 0 6px; font-size: 25px; font-weight: 850; color: var(--ink); line-height: 1.4; }
.penny-price span { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.penny-meta, .penny-reference { margin: 4px 0; color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.penny-note { font-size: 13px; color: var(--ink-2); line-height: 1.55; overflow-wrap: anywhere; }
.penny-card-actions { margin-top: auto; padding-top: 14px; font-size: 12px; }
.penny-empty { grid-column: 1 / -1; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 10px; padding: 18px; font-size: 14px; line-height: 1.5; }
.penny-empty p { margin: 6px 0 0; }
.penny-stale { border-style: dashed; }
.penny-stale .penny-label { color: var(--muted); background: var(--surface-2); }
.penny-explain, .penny-report, .penny-moderation { padding: 22px; margin-top: 22px; }
.penny-explain summary { cursor: pointer; font-weight: 750; }
.penny-explain dt { font-weight: 750; margin-top: 15px; }
.penny-explain dd { color: var(--ink-2); margin: 5px 0 0; font-size: 14px; line-height: 1.6; }
.penny-report p, .penny-moderation p { color: var(--ink-2); line-height: 1.6; font-size: 14px; }
.penny-report-form fieldset { border: 0; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; min-width: 0; }
.penny-wide { grid-column: 1 / -1; }
.penny-report-form fieldset:disabled { opacity: .72; }
.penny-report-form label span { font-weight: 400; font-size: 12px; line-height: 1.5; }
.penny-report-form textarea, .penny-review-form textarea { resize: vertical; }
.penny-review { padding: 18px 0; border-top: 1px solid var(--line); }
.penny-review-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.penny-private-photo img { display: block; max-width: 100%; max-height: 600px; object-fit: contain; background: #fff; margin-top: 10px; }
.penny-moderation[hidden] { display: none; }
@media (max-width: 850px) { .penny-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .penny-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) { .penny-header p { font-size: 15px; } .penny-grid, .penny-report-form fieldset, .penny-review-form { grid-template-columns: minmax(0,1fr); } .penny-filters { gap: 12px; padding: 14px; } .penny-filters label { font-size: 12px; } .penny-photo { height: 190px; } .penny-explain, .penny-report, .penny-moderation { padding: 17px; } }
@media (prefers-reduced-motion: reduce) { .penny-card { transition: none; } }