:root{
    --bg:#fff;
    --text:#111;
    --card-bg:#fff;
    --card-border:#e6e6e6;
    --accent:#bc511f;
    --radius:12px;
    font-family:Inter,system-ui,Arial;
}

/* Dark theme vars */
[data-theme="dark"]{
    --bg:#0b0b0b;
    --text:#fff;
    --card-bg:#111;
    --card-border:#2b2b2b;
}

/* Page basics */
body{background:var(--bg);color:var(--text);}

/* Filters - compact */
.tpjc-filters{display:flex;gap:10px;justify-content:center;margin:18px 0;flex-wrap:wrap;}
.tpjc-filters select,.tpjc-filters button{background:var(--card-bg);color:var(--text);border:1px solid var(--card-border);padding:8px 12px;border-radius:10px;font-size:14px;}

/* Grid: 3 columns desktop - denser (A: clean minimal) */
.tpjc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:6px 20px 40px;}
@media (max-width:940px){ .tpjc-gallery{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .tpjc-gallery{grid-template-columns:repeat(1,1fr);} }

/* Card */
.tpjc-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease;}
.tpjc-card:hover{transform:translateY(-4px);}

/* Photo */
.tpjc-photo{height:180px;overflow:hidden;border-bottom:1px solid var(--card-border);}
.tpjc-photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* Caption area (compact) */
.tpjc-caption{padding:12px 16px 18px;text-align:center;color:var(--text);}
.band-name{font-weight:700;color:var(--text) !important;margin:8px 0 6px;}
.band-cat{color:var(--accent);margin-bottom:6px;}
.band-status{font-size:13px;opacity:.9;color:var(--text) !important;}
.tpjc-video-link{
    display:inline-block;
    margin-bottom:6px;
    color:#1e90ff;
    font-weight:600;
}
/* View detail button - style A minimal but with arrow (placed under image) */
/* it's also given class tpjc-view-detail so existing JS still works */
.view-detail-btn{
    background:none !important;
    border:none !important;
    color:var(--accent);
    font-weight:700;
    font-size:13px;
    padding:0;
    margin-bottom:8px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
}
.view-detail-btn:hover{opacity:.85;transform:translateX(2px);}

/* Modal */
.tpjc-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);justify-content:center;align-items:center;z-index:9999;}
.modal-content{background:var(--card-bg);color:var(--text);border-radius:12px;padding:18px;width:94%;max-width:760px;max-height:90%;overflow:auto;position:relative;box-shadow:0 16px 40px rgba(0,0,0,.45);}
.close{position:absolute;right:14px;top:12px;cursor:pointer;font-size:20px;color:var(--text);}

/* Modal image & text */
.modal-img img{width:100%;height:360px;object-fit:cover;border-radius:8px;margin-bottom:14px;}
.modal-title, .modal-content h2, .modal-content p, .modal-content strong { color: var(--text) !important; }
.modal-content strong { color: var(--accent) !important; }

/* Members list */
.member-item{background:var(--card-border);padding:8px;border-radius:8px;margin-bottom:8px;}

/* Pagination */
.tpjc-pagination{display:flex;gap:8px;justify-content:center;margin:14px 0;align-items:center;}
.tpjc-pagination button{padding:6px 10px;border-radius:8px;border:1px solid var(--card-border);background:var(--card-bg);color:var(--text);cursor:pointer;}
.tpjc-pagination button.active{background:var(--accent);color:#fff !important;}

/* Toast */
#tpjcToast{position:fixed;bottom:20px;right:20px;background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;opacity:0;transform:translateY(10px);transition:opacity .25s, transform .25s;}
#tpjcToast.show{opacity:1;transform:translateY(0);}

/* theme toggle */
#tpjc-theme-toggle{position:fixed;top:12px;right:12px;background:transparent;border:none;font-size:20px;cursor:pointer;z-index:10001;}
.tpjc-theme-fade{position:fixed;inset:0;pointer-events:none;background:var(--bg);opacity:0;transition:opacity .35s;}
.tpjc-theme-fade.active{opacity:1;}

/* small niceties */
hr{border:none;border-top:1px solid var(--card-border);margin:14px 0;}
@media (max-width:900px){ .modal-img img{height:260px;} }
@media (max-width:600px){ .modal-img img{height:180px;} }