*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --fm-bg: #0f172a;             
    --fm-bg-card: rgba(30, 41, 59, 0.7); 
    --fm-border: rgba(255, 255, 255, 0.1); 
    --blue-corp: #2563eb;          
    --mercusys-muted: rgba(220, 38, 38, 0.5); 
    --tplink-muted: rgba(8, 145, 178, 0.5);
    --flixt-muted: rgba(29, 78, 216, 0.6); 
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--fm-bg);
    color: var(--text-main);
    margin: 0;
    padding: 30px 15px;
    background-image: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent),
                      radial-gradient(circle at bottom left, rgba(126, 34, 206, 0.1), transparent);
    background-attachment: fixed;
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    background: var(--fm-bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 35px 30px;
    border-radius: 24px;
    border: 1px solid var(--fm-border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

header {
    text-align: center;
    border-bottom: 1px solid var(--fm-border); /* Gładka linia zamiast przerywanej */
    padding-bottom: 20px;
    margin-bottom: 25px;
    position: relative;
}

.logo-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.header-icon { 
    height: 50px; 
    max-width: 100%; 
    width: auto; 
    pointer-events: none; 
}

header p { 
    color: var(--text-muted); 
    font-size: 1.05rem; 
    margin-top: 5px; 
}

.download-section {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    padding-top: 5px;
    position: relative;
    z-index: 10;
}

.download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--mercusys-muted); 
    border-radius: 50px;
    color: #f87171;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    cursor: pointer;
    text-align: center;
}

.global-alert {
    background-color: rgba(0, 0, 0, 0.3);
    border-left: 5px solid var(--blue-corp);
    padding: 18px;
    margin-bottom: 25px;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-muted);
    border-right: 1px solid var(--fm-border);
    border-top: 1px solid var(--fm-border);
    border-bottom: 1px solid var(--fm-border);
    word-break: break-word;
}
.global-alert strong { color: #60a5fa; }

.tabs { 
    display: flex; 
    justify-content: center; 
    margin-bottom: 25px; 
    border-bottom: 1px solid var(--fm-border); /* Gładka linia zamiast przerywanej */
    padding-bottom: 15px; 
    gap: 12px; 
    flex-wrap: wrap; 
}

.tab-button {
    background: rgba(0,0,0,0.2); 
    border: 1px solid var(--fm-border); 
    padding: 12px 24px; 
    font-size: 14px; 
    font-weight: 700;
    cursor: pointer; 
    color: var(--text-muted); 
    transition: all 0.3s ease; 
    outline: none; 
    border-radius: 40px; 
    font-family: 'Montserrat', sans-serif;
}

.tab-button.active.flixt { background: var(--flixt-muted); color: #fff; border-color: var(--flixt-muted); }
.tab-button.active.mercusys { background: var(--mercusys-muted); color: #fff; border-color: var(--mercusys-muted); }
.tab-button.active.tplink { background: var(--tplink-muted); color: #fff; border-color: var(--tplink-muted); }

.tab-content { display: none; animation: fadeIn 0.4s ease; }
.tab-content.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.step { 
    background: rgba(255,255,255,0.02); 
    padding: 22px; 
    margin-bottom: 20px; 
    border-radius: 16px; 
    border: 1px solid var(--fm-border); 
}
.step.flixt { border-left: 4px solid var(--flixt-muted); }
.step.mercusys { border-left: 4px solid var(--mercusys-muted); }
.step.tplink { border-left: 4px solid var(--tplink-muted); }

.step h2 { 
    margin-top: 0; 
    display: flex; 
    align-items: center; 
    font-size: 1.25rem; 
    color: #fff; 
}
.step-number {
    color: white; 
    border-radius: 50%; 
    min-width: 32px;
    height: 32px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    margin-right: 12px; 
    font-size: 15px; 
    font-weight: 800;
}
.step.flixt .step-number { background: var(--flixt-muted); }
.step.mercusys .step-number { background: var(--mercusys-muted); }
.step.tplink .step-number { background: var(--tplink-muted); }

/* Nowe, gładkie ramki dla adresów/linków/danych */
.config-box { 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.1); /* Gładka ramka */
    padding: 16px; 
    border-radius: 12px; 
    margin: 18px 0; 
    font-family: monospace; 
    font-size: 1.05rem; 
    text-align: center; 
    font-weight: bold; 
    color: #fff; 
    word-wrap: break-word;
    word-break: normal; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* Ładny cień */
}
.highlight-f { font-weight: bold; color: #60a5fa; }
.highlight-m { font-weight: bold; color: #f87171; }
.highlight-t { font-weight: bold; color: #22d3ee; }

/* Nowa, dedykowana ramka dla zdjęć (zastępuje brudny kod HTML) */
.img-wrapper {
    text-align: center; 
    margin: 25px 0; 
    background: rgba(255, 255, 255, 0.02); 
    padding: 12px; 
    border-radius: 16px; 
    border: 1px solid rgba(255, 255, 255, 0.08); /* Delikatna, gładka ramka */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Efekt uniesienia */
}
.img-wrapper img {
    max-width: 100%; 
    border-radius: 8px;
    display: block; /* Usuwa białe paski pod obrazkami */
    margin: 0 auto;
}

.vlan-mockup { 
    background: rgba(0,0,0,0.2); 
    border: 1px solid var(--fm-border); 
    padding: 20px; 
    margin: 20px 0; 
    border-radius: 12px; 
}
.vlan-mockup-title { font-weight: 800; color: #fff; font-size: 1.1rem; }
.vlan-mockup-desc { 
    font-size: 13px; 
    color: var(--text-muted); 
    margin-bottom: 20px; 
    border-bottom: 1px solid var(--fm-border); /* Gładka linia */
    padding-bottom: 15px; 
}
.vlan-row { 
    display: flex; 
    align-items: center; 
    margin-bottom: 12px; 
    font-size: 14px; 
}
.vlan-label { 
    width: 180px; 
    text-align: right; 
    padding-right: 20px; 
    font-weight: 600; 
    color: var(--text-muted); 
}
.vlan-input {
    flex: 1;
}
.vlan-input input[type="text"], 
.vlan-input select { 
    width: 250px; 
    max-width: 100%;
    padding: 8px 12px; 
    border: 1px solid rgba(255,255,255,0.05); 
    border-radius: 6px; 
    background-color: rgba(0,0,0,0.2); 
    color: #fff; 
}

.vlan-input input, 
.vlan-input select {
    pointer-events: none;
}

#Mercusys .vlan-input .highlight-value { color: #f87171; font-weight: bold; }
#TPLink .vlan-input .highlight-value { color: #22d3ee; font-weight: bold; }

.success { background-color: rgba(16, 185, 129, 0.1); border-left: 5px solid #34d399; padding: 18px; margin: 20px 0; border-radius: 8px; color: #6ee7b7; word-break: break-word; }
.warning { background-color: rgba(245, 158, 11, 0.1); border-left: 5px solid #fbbf24; padding: 15px; margin: 15px 0; border-radius: 8px; color: #fcd34d; word-break: break-word; }

@media (max-width: 768px) {
    body { padding: 10px 5px; }
    .container { padding: 15px 12px; border-radius: 12px; }
    .step { padding: 15px 12px; }
    ul, ol { padding-left: 20px; }
    .config-box { font-size: 0.9rem; padding: 12px; }
    .tabs { flex-direction: column; gap: 8px; }
    .tab-button { width: 100%; text-align: center; padding: 10px 15px; }
    .vlan-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .vlan-label { width: 100%; text-align: left; padding-right: 0; }
    .vlan-input { width: 100%; }
    .vlan-input input[type="text"], .vlan-input select { width: 100%; }
    .step h2 { font-size: 1.15rem; }
    .download-button { width: 100%; }
}

@media print {
    *, *::before, *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }
    .container { background-color: var(--fm-bg-card) !important; }
    .tabs, .download-section { display: none !important; }
    .tab-content { display: none !important; }
    .tab-content.active { display: block !important; }
}