.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid transparent; border-radius: 12px; padding: .78rem 1.05rem; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--sj-primary); color: #fff; }
.btn-primary:hover { background: var(--sj-primary-dark); color: #fff; }
.btn-accent { background: var(--sj-accent); color: #fff; }
.btn-accent:hover { filter: brightness(.95); color: #fff; }
.btn-outline { background: #fff; color: var(--sj-primary); border-color: var(--sj-border); }
.btn-danger { background: var(--sj-danger); color: #fff; }
.btn-block { width: 100%; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .25rem .55rem; font-size: .75rem; font-weight: 800; }
.badge-dark { background: rgba(32,33,36,.78); color: #fff; }
.flash { margin-top: 1rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--sj-border); background: #fff; }
.flash-success { border-color: #a3d9b1; color: var(--sj-success); }
.flash-error { border-color: #f3b3ae; color: var(--sj-danger); }
.flash-warning { border-color: #f4d58d; color: var(--sj-warning); }
.content-card, .panel, .filters-card, .auth-card { background: var(--sj-card); border: 1px solid var(--sj-border); border-radius: 20px; box-shadow: var(--shadow); padding: 1.25rem; }
.panel__header, .section-heading, .page-title-row, .listing-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading h2, .page-title-row h1, .listing-header h1 { margin: 0; }
.empty-state { background: #fff; border: 1px dashed var(--sj-border); border-radius: 20px; padding: 2rem; text-align: center; }
.ad-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ad-card { background: #fff; border: 1px solid var(--sj-border); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 22px rgba(37,26,50,.06); }
.ad-card__image { position: relative; display: block; aspect-ratio: 4 / 3; background: #eee; }
.ad-card__image img { width: 100%; height: 100%; object-fit: cover; }
.ad-card__image .badge { position: absolute; right: .6rem; top: .6rem; }
.ad-card__body { padding: 1rem; display: grid; gap: .55rem; }
.ad-card h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.ad-card p { margin: 0; color: var(--sj-muted); font-size: .92rem; }
.ad-meta { display: flex; gap: .75rem; flex-wrap: wrap; color: var(--sj-muted); font-size: .88rem; }
.ad-card__footer { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.ad-card__footer small { color: var(--sj-muted); text-align: right; }
.ad-list { display: grid; gap: 1rem; }
.ad-row { display: grid; grid-template-columns: 180px 1fr 160px; gap: 1rem; align-items: stretch; background: #fff; border: 1px solid var(--sj-border); border-radius: 18px; padding: .8rem; }
.ad-row__image { position: relative; border-radius: 14px; overflow: hidden; background: #eee; min-height: 130px; }
.ad-row__image img { width: 100%; height: 100%; object-fit: cover; }
.ad-row__image .badge { position: absolute; left: .5rem; top: .5rem; }
.ad-row__content h2 { margin: .2rem 0 .4rem; font-size: 1.15rem; }
.ad-row__content p { margin: 0 0 .6rem; color: var(--sj-muted); }
.ad-row__side { display: flex; flex-direction: column; align-items: end; justify-content: space-between; color: var(--sj-muted); }
.ad-row__side strong { color: var(--sj-text); }
.pagination { display: flex; gap: .4rem; margin-top: 1.5rem; flex-wrap: wrap; }
.pagination a { background: #fff; border: 1px solid var(--sj-border); border-radius: 10px; padding: .55rem .8rem; }
.pagination a.is-active { background: var(--sj-primary); color: #fff; }
.form-grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.stack-form { display: grid; gap: 1rem; }
.inline-search { display: flex; gap: .75rem; align-items: end; margin-bottom: 1rem; }
.check { display: flex; flex-direction: row; align-items: center; gap: .5rem; font-weight: 600; }
.check input { width: auto; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; max-height: 340px; overflow: auto; }
.checkbox-grid label { display: flex; flex-direction: row; gap: .5rem; font-weight: 550; }
.checkbox-grid input { width: auto; }
.status { display: inline-flex; border-radius: 999px; padding: .2rem .55rem; font-size: .78rem; font-weight: 800; background: #ede7f6; color: var(--sj-primary-dark); }
.status-active { background: #dcfce7; color: #166534; }
.status-pending, .status-processing { background: #fef3c7; color: #92400e; }
.status-rejected, .status-failed, .status-deleted { background: #fee2e2; color: #991b1b; }
.status-draft { background: #e5e7eb; color: #374151; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { border-bottom: 1px solid var(--sj-border); padding: .75rem; text-align: left; vertical-align: middle; }
.data-table th { color: var(--sj-muted); font-size: .84rem; }
.table-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 10px; background: #eee; }
.table-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.notice-error { color: var(--sj-danger); background: #fee2e2; padding: .75rem; border-radius: 12px; }
.media-admin-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.media-admin-item { border: 1px solid var(--sj-border); border-radius: 14px; padding: .6rem; display: grid; gap: .5rem; background: #fff; }
.media-admin-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; background: #eee; }
.package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.package-card { background: #fff; border: 1px solid var(--sj-border); border-radius: 18px; padding: 1rem; display: grid; gap: .5rem; }
@media (max-width: 900px) { .ad-grid { grid-template-columns: repeat(2, 1fr); } .ad-row { grid-template-columns: 120px 1fr; } .ad-row__side { grid-column: 2; align-items: start; } .media-admin-grid, .package-grid { grid-template-columns: repeat(2, 1fr); } .form-grid.two { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ad-grid, .media-admin-grid, .package-grid, .checkbox-grid { grid-template-columns: 1fr; } .ad-row { grid-template-columns: 1fr; } .ad-row__side { grid-column: auto; } .inline-search { flex-direction: column; align-items: stretch; } }