.trombi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:26px 22px; margin-top:28px; padding-left:18px; }
.trombi-card { min-width:0; overflow:visible; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 3px 12px rgba(15,23,42,.06); }
.trombi-portrait { position:relative; }
.trombi-portrait img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center 30%; background:#edf2f7; border-radius:13px 13px 0 0; }
.trombi-number { position:absolute; top:-18px; left:-16px; z-index:2; width:66px; height:66px; display:grid; place-items:center; isolation:isolate; color:#000; font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; filter:drop-shadow(0 3px 3px rgba(32,30,91,.3)); }
.trombi-number::before, .trombi-number::after { content:""; position:absolute; inset:0; border-radius:50%; }
.trombi-number::before { z-index:-2; background:url('/logo.png') center / contain no-repeat; }
.trombi-number::after { z-index:-1; inset:16.5%; background:#fff; }
.trombi-name { padding:16px; text-align:center; font-size:1.05rem; overflow-wrap:anywhere; }
.trombi-form { max-width:560px; display:grid; gap:14px; margin-top:18px; }
.trombi-form label { display:block; font-weight:600; margin-bottom:6px; }
.trombi-form input { width:100%; padding:11px; border:1px solid #bdc6d2; border-radius:8px; font:inherit; background:#fff; }
.trombi-form small { display:block; margin-top:6px; color:#64748b; }
.trombi-form-actions,.trombi-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.trombi-actions { padding:0 14px 14px; justify-content:center; }
.trombi-actions form { margin:0; }
.trombi-delete { border:1px solid #fecaca; border-radius:8px; background:#fff1f2; color:#b91c1c; font:inherit; padding:8px 12px; cursor:pointer; }
.trombi-flash { padding:12px; border-radius:8px; margin:14px 0; }
.trombi-success { color:#166534; background:#e6ffed; border:1px solid #b2f2bb; }
.trombi-error { color:#991b1b; background:#ffe6e6; border:1px solid #ffb3b3; }
.trombi-current-photo { display:block; width:130px; border-radius:10px; margin-top:8px; }
@media(max-width:480px) { .trombi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; padding-left:10px; } .trombi-number { width:56px; height:56px; font-size:25px; top:-14px; left:-9px; } .trombi-name { padding:12px 8px; font-size:.95rem; } }

.trombi-number-three { font-size:26px; }
.trombi-number-four { font-size:19px; }
@media(max-width:480px) { .trombi-number-three { font-size:22px; } .trombi-number-four { font-size:16px; } }