/* ========================================================= */
/* SAFE STYLE.CSS — Neutered to prevent conflicts            */
/* (Only unique components & safe utilities remain)          */
/* ========================================================= */

/* --------------------------------------------------------- */
/* 1. SAFE GENERIC UTILITIES (No !important, no conflicts)   */
/* --------------------------------------------------------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.text-center { text-align: center; }
.text-white { color: #FFFFFF; }
.relative { position: relative; }
.block { display: block; }
.whitespace-nowrap { white-space: nowrap; }
.gap-2 { gap: 0.6rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 0.8rem; }
.mb-4 { margin-bottom: 1.2rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }

/* --------------------------------------------------------- */
/* 2. DEV PANEL (Unique to this file)                        */
/* --------------------------------------------------------- */
.dev-panel {
    position: fixed; bottom: 20px; right: 20px; z-index: 9999;
    background: rgba(10, 20, 30, 0.9); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
    padding: 16px 20px; color: #E2E8F0; font-family: var(--font-mono, monospace);
    font-size: 0.75rem; min-width: 220px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: none;
}
.dev-panel.visible { display: block; }
.dev-panel h4 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #00E676; margin-bottom: 0.8rem; }
.dev-panel .input-group { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
.dev-panel .input-group input { flex: 1; padding: 0.3rem 0.6rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #FFFFFF; font-size: 0.7rem; width: 70px; }
.dev-panel .input-group button { padding: 0.3rem 0.8rem; border-radius: 6px; border: none; background: #00E676; color: #0A2F44; font-weight: 700; font-size: 0.7rem; cursor: pointer; }
.dev-panel .input-group button.danger { background: #EF4444; color: white; }
.dev-panel .reset-btn { width: 100%; padding: 0.3rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); color: #FFFFFF; font-size: 0.65rem; cursor: pointer; }

/* --------------------------------------------------------- */
/* 3. 6-BIN SEGREGATION (Unique component)                   */
/* --------------------------------------------------------- */
.segregation-rules { padding: 3rem 1.5rem; background-color: transparent; }
.segregation-container { max-width: 80rem; margin: 0 auto; }
.segregation-header-block { text-align: center; margin-bottom: 2.5rem; }
.segregation-badge { color: #34d399; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.segregation-title { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; margin-top: 0.5rem; }
.segregation-desc { color: #4b5563; font-size: 1.125rem; line-height: 1.75rem; max-width: 48rem; margin: 1rem auto 0; }
.bin-slider-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 2rem; padding: 1rem 0 3rem; scrollbar-width: none; }
.bin-slider-wrapper::-webkit-scrollbar { display: none; }
.bin-card { scroll-snap-align: center; flex-shrink: 0; width: 18rem; display: flex; flex-direction: column; transition: transform 0.3s; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); min-height: 400px; }
.bin-card:hover { transform: translateY(-0.5rem); }
.bin-card-img-container { height: 50%; width: 100%; position: relative; overflow: hidden; min-height: 200px; }
.bin-card-img-container img { width: 100%; height: 100%; object-fit: cover; }
.bin-card-info { padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; flex: 1; }
.bin-card-name { font-size: 1.5rem; font-weight: 900; letter-spacing: 0.1em; margin-bottom: 0.25rem; }
.bin-card-subtitle { font-weight: 700; font-size: 0.875rem; margin-bottom: 0.5rem; text-transform: uppercase; }
.bin-card-details { font-size: 0.875rem; }
.bin-card--green { border-top: 12px solid #166534; background: #22c55e; }
.bin-card--green .bin-card-name, .bin-card--blue .bin-card-name, .bin-card--black .bin-card-name, .bin-card--red .bin-card-name { color: white; }
.bin-card--green .bin-card-details, .bin-card--blue .bin-card-details, .bin-card--black .bin-card-details, .bin-card--red .bin-card-details { color: rgba(255, 255, 255, 0.9); }
.bin-card--blue { border-top: 12px solid #1e40af; background: #3b82f6; }
.bin-card--black { border-top: 12px solid #111827; background: #374151; }
.bin-card--red { border-top: 12px solid #991b1b; background: #ef4444; }
.bin-card--yellow { border-top: 12px solid #a16207; background: #eab308; }
.bin-card--yellow .bin-card-name { color: #111827; }
.bin-card--yellow .bin-card-subtitle { color: #713f12; }
.bin-card--yellow .bin-card-details { color: #1f2937; font-weight: 500; }
.bin-card--white { border-top: 12px solid #d1d5db; background: #f9fafb; }
.bin-card--white .bin-card-name { color: #111827; }
.bin-card--white .bin-card-subtitle { color: #6b7280; }
.bin-card--white .bin-card-details { color: #374151; font-weight: 500; }
.bin-card--white .bin-card-img-container img { border-bottom: 1px solid #e5e7eb; }

/* --------------------------------------------------------- */
/* 4. PIBO NETWORK ANIMATIONS (Unique component)             */
/* --------------------------------------------------------- */
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeCardLeft { to { opacity: 1; transform: translateX(0); } }
@keyframes fadeCardRight { to { opacity: 1; transform: translateX(0); } }
@keyframes drawSpineDown { to { transform: translateX(-50%) scaleY(1); } }
@keyframes popInCenter { to { transform: translate(-50%, -50%) scale(1); } }
@keyframes drawLineXNoY { to { transform: scaleX(1); } }
@keyframes drawLineX { to { transform: translateY(-50%) scaleX(1); } }
@keyframes popIn { to { transform: translateY(-50%) scale(1); } }
@keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --------------------------------------------------------- */
/* 5. ACCESSIBILITY (Focus States)                           */
/* --------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, 
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--brand-primary, #00E676);
    outline-offset: 4px;
    border-radius: 4px;
}
@media (max-width: 768px) {
    a:focus-visible, button:focus-visible, input:focus-visible, 
    textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
        outline-offset: 2px;
    }
}