body { font-family: 'Inter', sans-serif; }
.footer-wrapper { padding: 0 24px; }
@media (max-width: 768px) { .footer-wrapper { padding: 0; } }

.dc-back { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 8px 14px; border: 1px solid #2563EB; border-radius: 10px; color: #1E40AF; font-size: 13px; font-weight: 600; text-decoration: none; background: #fff; }
.dc-back:hover { background: #EFF6FF; }

.dc-hero { position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(115deg, #166534 0%, #15803d 45%, #22c55e 100%); padding: 30px 32px; margin-bottom: 16px; }
.dc-hero-b1 { position: absolute; right: -40px; top: -50px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.08); }
.dc-hero-b2 { position: absolute; right: 90px; bottom: -90px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.06); }
.dc-hero-in { position: relative; max-width: 660px; }
.dc-hero-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #dcfce7; background: rgba(255,255,255,.14); padding: 5px 12px; border-radius: 999px; }
.dc-hero-h1 { margin: 14px 0 8px; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 32px; line-height: 1.1; color: #fff; letter-spacing: -.01em; }
.dc-hero-sub { margin: 0; font-size: 15px; line-height: 1.55; color: #dcfce7; max-width: 580px; }
@media (max-width: 640px) { .dc-hero { padding: 24px 20px; } .dc-hero-h1 { font-size: 24px; } }


.dc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 2px 12px; }
.dc-head h2 { font-size: 21px; font-weight: 800; color: #0f172a; margin: 0; display: flex; align-items: center; gap: 10px; }
.dc-head h2 i { color: #16a34a; }
.dc-count { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #dcfce7; color: #166534; }
.dc-search { flex: 0 1 340px; min-width: 0; width: 100%; padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 12px; font-size: 14px; background: #fff; color: #0f172a; outline: none; }
.dc-search:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }

.dc-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 6px; scrollbar-width: thin; }
.dc-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: #334155; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dc-chip i { font-style: normal; font-size: 11px; color: #94a3b8; font-weight: 700; }
.dc-chip:hover { border-color: #16a34a; }
.dc-chip--on { background: #16a34a; border-color: #16a34a; color: #fff; }
.dc-chip--on i { color: #dcfce7; }

.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.dc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; overflow: hidden; transition: border-color .18s, box-shadow .18s; }
.dc-card:hover { border-color: #16a34a; box-shadow: 0 8px 22px -14px rgba(22,101,52,.45); }
.dc-card[hidden] { display: none; }
.dc-card-fig { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(180deg, #f0fdf4, #dcfce7); overflow: hidden; }
.dc-card-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.dc-card:hover .dc-card-fig img { transform: scale(1.04); }
.dc-card-3d { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #0EA5E9 0%, #4F46E5 100%); color: #fff; font-size: 11px; font-weight: 700; }
.dc-card-prem { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #111827; color: #facc15; font-size: 12px; }
.dc-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.dc-card-cat { font-size: 10.5px; color: #8A92A8; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-bottom: 5px; }
.dc-card-t { font-size: 14.5px; font-weight: 700; color: #1B2559; line-height: 1.3; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-card-dims { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dc-card-dims i { color: #16a34a; }
.dc-card-act { display: flex; gap: 8px; margin-top: auto; }
.dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; }
.dc-btn--go { flex: 1; background: #16a34a; color: #fff; }
.dc-btn--go:hover { background: #15803d; }
.dc-btn--ghost { flex: 0 0 40px; border: 1px solid #e2e8f0; color: #ef4444; background: #fff; }
.dc-btn--ghost:hover { border-color: #ef4444; }

.dc-empty { padding: 28px; text-align: center; color: #64748b; font-size: 14px; background: #fff; border: 1px dashed #cbd5e1; border-radius: 16px; }
.dc-empty a { color: #16a34a; font-weight: 600; }
.dc-more-wrap { display: flex; justify-content: center; margin: 18px 0 8px; }
.dc-more { padding: 11px 22px; border-radius: 12px; border: 1px solid #16a34a; background: #fff; color: #166534; font-weight: 700; font-size: 14px; cursor: pointer; }
.dc-more:hover { background: #f0fdf4; }
.dc-more[hidden] { display: none; }

body.dark-theme .dc-back { background: #0f172a; color: #93c5fd; border-color: #1e40af; }
body.dark-theme .dc-hero { background: linear-gradient(115deg, #052e16 0%, #14532d 50%, #166534 100%); }
body.dark-theme .dc-card,
body.dark-theme .dc-chip,
body.dark-theme .dc-empty,
body.dark-theme .dc-more,
body.dark-theme .dc-btn--ghost { background: #1e293b; border-color: #334155; }
body.dark-theme .dc-card-t,
body.dark-theme .dc-head h2 { color: #e2e8f0; }
body.dark-theme .dc-card-dims,
body.dark-theme .dc-empty { color: #94a3b8; }
body.dark-theme .dc-chip { color: #cbd5e1; }
body.dark-theme .dc-chip--on { background: #16a34a; border-color: #16a34a; color: #fff; }
body.dark-theme .dc-search { background: #0f172a; border-color: #334155; color: #e2e8f0; }
body.dark-theme .dc-card-fig { background: linear-gradient(180deg, #0f172a, #1e293b); }
body.dark-theme .dc-count { background: #14532d; color: #bbf7d0; }
body.dark-theme .dc-more { color: #86efac; }

.dc-gate { max-width: 520px; margin: 14px auto 6px; padding: 22px 22px 20px; text-align: center; background: #fff; border: 1px solid #bbf7d0; border-radius: 18px; box-shadow: 0 10px 28px -18px rgba(22,101,52,.5); }
.dc-gate[hidden] { display: none; }
.dc-gate-ic { width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: #dcfce7; color: #166534; font-size: 19px; }
.dc-gate-t { display: block; font-size: 17px; color: #0f172a; margin-bottom: 6px; }
.dc-gate-p { margin: 0 0 14px; font-size: 13.5px; color: #475569; line-height: 1.5; }
.dc-gate-err { color: #b91c1c; }
.dc-gate-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dc-gate-row .dc-btn { flex: 0 1 auto; min-width: 150px; }
.dc-gate-reg { border: 1px solid #16a34a; color: #166534; background: #fff; }
.dc-gate-reg:hover { background: #f0fdf4; }
.dc-cap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.dc-cap-img { width: 200px; height: 70px; border-radius: 10px; border: 1px solid #e2e8f0; background: #f4f7fc; }
.dc-cap-new { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; color: #166534; cursor: pointer; }
.dc-cap-new:hover { border-color: #16a34a; }
.dc-cap-in { flex: 0 1 190px; text-align: center; letter-spacing: .2em; font-size: 16px; }
body.dark-theme .dc-gate { background: #1e293b; border-color: #14532d; }
body.dark-theme .dc-gate-t { color: #e2e8f0; }
body.dark-theme .dc-gate-p { color: #94a3b8; }
body.dark-theme .dc-gate-err { color: #fca5a5; }
body.dark-theme .dc-gate-ic { background: #14532d; color: #bbf7d0; }
body.dark-theme .dc-gate-reg,
body.dark-theme .dc-cap-new { background: #0f172a; color: #86efac; border-color: #166534; }